78 lines
1.2 KiB
SCSS
78 lines
1.2 KiB
SCSS
.useful-inner {
|
|
padding: 4rem 0;
|
|
display: grid;
|
|
grid-template-columns: 67% auto;
|
|
gap: 3.6rem;
|
|
}
|
|
|
|
.useful-aside-item-top {
|
|
@include flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-size: 1.2rem;
|
|
color: $base-green;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
.useful-aside-img {
|
|
@include imgStyle(7.7rem, 8.5rem, cover);
|
|
}
|
|
|
|
.useful-aside-item {
|
|
@include flex(column);
|
|
gap: 1rem;
|
|
max-height: 7.5rem;
|
|
}
|
|
|
|
.useful-aside-item-bottom {
|
|
p {
|
|
font-size: 1.3rem;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.useful-aside-content {
|
|
@include flex(column);
|
|
gap: 3.5rem;
|
|
}
|
|
|
|
.useful-aside {
|
|
@include flex(column);
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
.useful-main-content {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
// Media
|
|
@media screen and (max-width: 1250px) {
|
|
.useful-inner {
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1100px) {
|
|
.useful-inner {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media screen and (max-width: 950px) {
|
|
.useful-main-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.trending-item {
|
|
&:nth-child(6),
|
|
&:nth-child(7),
|
|
&:nth-child(8) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|