:root{
--primary-color: #0072e5;
} .banner-section.banner-section-style-1 .banner-section-wrapper {
display: flex;
align-items: flex-start;
margin-inline: -10px;
}
@media (max-width: 991px) {
.banner-section.banner-section-style-1 .banner-section-wrapper {
flex-wrap: wrap;
}
}
@media (max-width: 600px) {
.banner-section.banner-section-style-1 .banner-section-wrapper {
flex-direction: column;
gap: 20px;
}
}
.banner-section.banner-section-style-1 .banner-section-wrapper > * {
padding-inline: 10px;
}
@media (min-width: 992px) {
.banner-section.banner-section-style-1 .banner-section-wrapper > * {
position: sticky;
top: 40px;
}
}
.banner-section.banner-section-style-1 .banner-section-wrapper > *:not(.slider-part) {
width: 25%;
container-type: inline-size;
}
@media (max-width: 991px) {
.banner-section.banner-section-style-1 .banner-section-wrapper > *:not(.slider-part) {
width: 50%;
}
}
@media (max-width: 600px) {
.banner-section.banner-section-style-1 .banner-section-wrapper > *:not(.slider-part) {
width: 100%;
}
}
.banner-section.banner-section-style-1 .banner-section-wrapper .slider-part {
width: 50%;
}
@media (max-width: 991px) {
.banner-section.banner-section-style-1 .banner-section-wrapper .slider-part {
width: 100%;
order: 1;
}
}
.banner-section.banner-section-style-1 .banner-section-wrapper .slider-part .mag-post-single .mag-post-img {
aspect-ratio: 1 / 0.7;
}
.banner-section.banner-section-style-1 .banner-section-wrapper .slider-part .mag-post-single .mag-post-detail .mag-post-title {
font-size: var(--font-size-md);
}
@media (min-width: 1024px) {
.banner-section.banner-section-style-1 .banner-section-wrapper .slider-part .mag-post-single .mag-post-detail .mag-post-title {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
@media (max-width: 991px) {
.banner-section.banner-section-style-1 .banner-section-wrapper .editors-pick-part {
order: 2;
}
}
.banner-section.banner-section-style-1 .banner-section-wrapper .editors-pick-part .editors-pick-wrapper .mag-post-single {
margin-bottom: 20px;
}
@container (max-width: 480px) {
.banner-section.banner-section-style-1 .banner-section-wrapper .editors-pick-part .editors-pick-wrapper .mag-post-single .mag-post-detail .mag-post-title {
margin: 0 0 5px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: calc(var(--font-size-sm) + 2px);
}
}
@media (max-width: 991px) {
.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part {
order: 3;
}
}
.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single {
margin-bottom: 20px;
gap: 15px;
}
.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single .mag-post-img {
width: 35%;
}
.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single .mag-post-img .trending-no {
position: absolute;
inset-inline-start: 5px;
bottom: 5px;
z-index: 1;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: var(--theme-color);
color: var(--white);
font-size: calc(var(--font-size-sm) + 2px);
line-height: 1;
}
.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single .mag-post-img + .mag-post-detail {
width: calc(65% - 20px);
}
.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single .mag-post-detail {
align-self: center;
padding: 10px 0;
padding-inline-end: 5px;
}
@container (max-width: 480px) {
.banner-section.banner-section-style-1 .banner-section-wrapper .trending-part .trending-wrapper .mag-post-single .mag-post-detail .mag-post-title {
margin: 0 0 5px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: calc(var(--font-size-sm) + 2px);
}
} .magazine-tile-section.style-2 .magazine-tile-section-wrapper {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@container (max-width: 991px) {
.magazine-tile-section.style-2 .magazine-tile-section-wrapper {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container (max-width: 600px) {
.magazine-tile-section.style-2 .magazine-tile-section-wrapper {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@container (min-width: 601px) {
.magazine-tile-section.style-2 .magazine-tile-section-wrapper .mag-post-single:first-child {
grid-column: span 2;
}
.magazine-tile-section.style-2 .magazine-tile-section-wrapper .mag-post-single:first-child .mag-post-detail .mag-post-title {
font-size: var(--font-size-md);
}
}
@container (min-width: 601px) {
.magazine-tile-section.style-2 .magazine-tile-section-wrapper .mag-post-single:nth-child(2) {
grid-row: span 2;
}
} .magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single {
min-height: 60px;
}
.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-img {
max-width: 70px;
background-color: transparent;
box-shadow: unset;
}
.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-img a {
display: none;
}
.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-img .trending-counter {
background-color: transparent;
color: var(--clr-foreground);
font-size: var(--font-size-lg);
bottom: unset;
top: 50%;
opacity: 0.2;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-detail {
padding: 5px;
padding-block: 15px;
padding-inline-end: 15px;
}
@container (max-width: 480px) {
.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-detail {
padding-block: 5px;
}
}
@container (max-width: 480px) {
.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-detail .mag-post-title {
margin: 0 0 5px;
font-size: calc(var(--font-size-base) - 3px);
}
}
@container (max-width: 375px) {
.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single .mag-post-detail .mag-post-title {
font-size: var(--font-size-sm);
}
}
.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single:focus-within .mag-post-img .trending-counter, .magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single:hover .mag-post-img .trending-counter {
opacity: 0.7;
}
.magazine-trending-carousel-section .magazine-trending-carousel-section-wrapper.style-3 .mag-post-single:not(:nth-child(n+10)) .mag-post-img .trending-counter::before {
content: "0";
}