42 lines
904 B
CSS
42 lines
904 B
CSS
.home-latest {
|
|
display: grid;
|
|
grid-column: main-start / main-end;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: min-content min-content;
|
|
grid-template-areas:
|
|
"blog1 blog1 blog2 blog2"
|
|
"photo1 photo2 photo3 photo4";
|
|
|
|
.home-latest__blog {
|
|
margin-block-end: var(--space-m);
|
|
}
|
|
|
|
.home-latest__blog:nth-of-type(1) {
|
|
grid-area: blog1;
|
|
border-right: 2px dashed var(--gray6);
|
|
padding-inline-end: var(--space-s);
|
|
}
|
|
|
|
.home-latest__blog:nth-of-type(2) {
|
|
grid-area: blog2;
|
|
padding-inline-start: var(--space-s);
|
|
}
|
|
|
|
.home-latest__photo {
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
.home-latest {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: repeat(min-content, 4);
|
|
grid-template-areas:
|
|
"blog1 blog2"
|
|
"photo1 photo2"
|
|
"photo3 photo4";
|
|
}
|
|
}
|
|
|
|
p + .home-latest {
|
|
margin-block-start: var(--space-paragraph);
|
|
}
|