.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; } } }