.popular-content {
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1224px !important;
border-top-width: 3px;
border-style: solid;
--tw-border-opacity: 1;
border-top-color: rgb(62 62 67 / var(--tw-border-opacity));
padding-top: 16px
}

    @media (min-width: 782px) {.popular-content {
padding-top: 31px
}
    }

    .popular-content__heading {
margin-bottom: 16px;
font-family: rift, sans-serif;
font-size: 28px;
line-height: 36px;
letter-spacing: 0.67px;
        font-weight: 600
}

    @media (min-width: 782px) {

    .popular-content__heading {
margin-bottom: 31px;
font-size: 32px;
line-height: 40px;
letter-spacing: 0.77px
}
        }

    .popular-content__cards {
display: flex;
flex-direction: column;
gap: 24px
}

    @media (min-width: 1050px) {

    .popular-content__cards {
flex-direction: row;
gap: 55px
}
        }

    .popular-content__left {
display: flex;
flex-direction: column;
gap: 24px
}

    @media (min-width: 782px) {

    .popular-content__left {
gap: 46px
}
        }

    @media (min-width: 1050px) {

    .popular-content__left {
flex-basis: 69%
}
        }

    .popular-content__left .popular-content__card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px
}

    @media (min-width: 782px) {

    .popular-content__left .popular-content__card {
flex-direction: row;
gap: 46px
}
            }

    .popular-content__left .popular-content__card-image {
height: 100%;
max-height: 227px;
width: 100%;
overflow: hidden
}

    @media (min-width: 782px) {

    .popular-content__left .popular-content__card-image {
max-height: 214px;
min-height: 214px;
min-width: 378px;
max-width: 378px
}
                }

    .popular-content__left .popular-content__card-image img {
height: 100%;
max-height: 227px;
width: 100%;
-o-object-fit: cover;
   object-fit: cover;
transition-property: 0.25s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}

    @media (min-width: 782px) {

    .popular-content__left .popular-content__card-image img {
max-height: 214px;
min-height: 214px
}
                    }

    @media (min-width: 1050px) {

    .popular-content__left .popular-content__card-data {
max-width: 358px
}
                }

    .popular-content__left .popular-content__card-data .title {
font-family: rift, sans-serif;
font-size: 24px;
line-height: 32px;
letter-spacing: 0.58px;
--tw-text-opacity: 1;
color: rgb(62 62 67 / var(--tw-text-opacity));
transition-property: 0.25s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
                    font-weight: 600
}

    @media (min-width: 782px) {

    .popular-content__left .popular-content__card-data .title {
font-size: 28px;
line-height: 38px;
letter-spacing: 0.67px
}
                    }

    .popular-content__left .popular-content__card-data .description {
position: relative;
z-index: 1;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
font-family: Montserrat, sans-serif;
font-size: 16px;
line-height: 24px;
--tw-text-opacity: 1;
color: rgb(62 62 67 / var(--tw-text-opacity));
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical
}

    .popular-content__left .popular-content__card > a {
position: absolute;
z-index: 2;
height: 100%;
width: 100%
}

    .popular-content__left .popular-content__card > a > span {
display: none
}

    .popular-content__left .popular-content__card > a:hover {
text-decoration-line: none
}

    .popular-content__left .popular-content__card > a:hover + .popular-content__card-image img {
--tw-scale-x: 1.2;
--tw-scale-y: 1.2;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

    .popular-content__left .popular-content__card > a:hover + .popular-content__card-image + .popular-content__card-data .title {
text-decoration-line: underline
}

    .popular-content__right {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 25px
}

    @media (min-width: 1050px) {

    .popular-content__right {
flex-basis: 31%;
flex-direction: column;
justify-content: space-between;
gap: 36px
}
        }

    .popular-content__right .popular-content__card-small {
position: relative;
display: flex;
flex-direction: column;
gap: 13px;
            width: calc(50% - 12.5px)
}

    @media (min-width: 430px) {

    .popular-content__right .popular-content__card-small {
                width: calc(33.33% - 17px)
        }
            }

    @media (min-width: 1050px) {

    .popular-content__right .popular-content__card-small {
width: 100%;
flex-direction: row;
align-items: center
}
            }

    .popular-content__right .popular-content__card-small-image, .popular-content__right .popular-content__card-small-image img {
height: 100%;
max-height: 112px;
min-height: 112px;
width: 100%;
overflow: hidden;
-o-object-fit: cover;
   object-fit: cover
}

    @media (min-width: 1050px) {

    .popular-content__right .popular-content__card-small-image, .popular-content__right .popular-content__card-small-image img {
max-height: 93px;
min-height: 93px;
min-width: 93px;
max-width: 93px
}
                }

    .popular-content__right .popular-content__card-small-data {
font-family: rift, sans-serif;
font-size: 18px;
line-height: 26px;
--tw-text-opacity: 1;
color: rgb(62 62 67 / var(--tw-text-opacity));
transition-property: 0.25s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
                font-weight: 600
}

    @media (min-width: 1050px) {

    .popular-content__right .popular-content__card-small-data {
max-width: 182px;
font-size: 20px;
line-height: 28px;
letter-spacing: 0.48px
}
                }

    .popular-content__right .popular-content__card-small > a {
position: absolute;
z-index: 2;
height: 100%;
width: 100%
}

    .popular-content__right .popular-content__card-small > a > span {
display: none
}

    .popular-content__right .popular-content__card-small > a:hover {
text-decoration-line: none
}

    .popular-content__right .popular-content__card-small > a:hover + .popular-content__card-small-image img {
--tw-scale-x: 1.2;
--tw-scale-y: 1.2;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

    .popular-content__right .popular-content__card-small > a:hover + .popular-content__card-small-image + .popular-content__card-small-data {
text-decoration-line: underline
}