64 lines
804 B
SCSS
64 lines
804 B
SCSS
|
.posts {
|
||
|
|
padding: 4rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.posts-inner {
|
||
|
|
@include flex(column);
|
||
|
|
gap: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.posts-content {
|
||
|
|
display: grid;
|
||
|
|
grid-template-areas: "big big sm1 sm2" "big big sm3 sm4" "sm5 sm6 sm7 sm8";
|
||
|
|
gap: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.posts-item {
|
||
|
|
&.sm {
|
||
|
|
.trending-img {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.big {
|
||
|
|
grid-area: big;
|
||
|
|
}
|
||
|
|
&.sm1 {
|
||
|
|
grid-area: sm1;
|
||
|
|
}
|
||
|
|
&.sm2 {
|
||
|
|
grid-area: sm2;
|
||
|
|
}
|
||
|
|
&.sm3 {
|
||
|
|
grid-area: sm3;
|
||
|
|
}
|
||
|
|
&.sm4 {
|
||
|
|
grid-area: sm4;
|
||
|
|
}
|
||
|
|
&.sm5 {
|
||
|
|
grid-area: sm5;
|
||
|
|
}
|
||
|
|
&.sm6 {
|
||
|
|
grid-area: sm6;
|
||
|
|
}
|
||
|
|
&.sm7 {
|
||
|
|
grid-area: sm7;
|
||
|
|
}
|
||
|
|
&.sm8 {
|
||
|
|
grid-area: sm8;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Media
|
||
|
|
@media screen and (max-width: 950px) {
|
||
|
|
.posts-item.big {
|
||
|
|
grid-area: none;
|
||
|
|
@include stretch;
|
||
|
|
}
|
||
|
|
.posts-content {
|
||
|
|
@include flex;
|
||
|
|
}
|
||
|
|
.posts-item.sm {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|