.marquee-side-by-side {
    position: relative;
    padding-block-start: 46px;
}

.marquee-side-by-side::before {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 146px;
    height: 86px;
    background-image: url(/includes/public/assets/shared/decorations/intro-leaf-right.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    z-index: 2;
}

.marquee-side-by-side .widget-header,
.marquee-side-by-side .slides {
    max-width: 1280px;
}

.marquee-side-by-side .widget-title {
    font-size: 3rem;
    letter-spacing: -0.03rem;
    line-height: 1;
}

.marquee-side-by-side .widget-header .widget-view-all {
    display: none;
}

.marquee-side-by-side .widget-view-all.mobile {
    max-width: 169px;
    margin-inline: auto;
    color: var(--secondary-color-300);
}

.marquee-side-by-side .shared-play-button {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*********/
/*---- slides ----*/
/*********/


.marquee-side-by-side .slides {
    gap: 32px;
    margin-block-end: 44px;
    position: relative;
    z-index: 1;
}

.marquee-side-by-side .slide .slide-title {
    font-family: var(--font-body);
}


.marquee-side-by-side .slide .slide-title img {
    max-width: 27px;
    display: inline !important;
    vertical-align: middle;
    margin: 0;
}

.marquee-side-by-side .slide .category {
    text-transform: uppercase;
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.0262rem;
    line-height: calc(22/14);
    color: var(--secondary-color-300);
}

/*********/
/*---- REG SLIDE ----*/
/*********/

.core-marquee[data-layout="horizontal"] .slide:not(:nth-child(1)) .slide-title {
    font-size: var(--text-base);
}

.marquee-side-by-side .slide:not(.promoted) .img-cont {
    border-radius: var(--rounded-circle);
    outline: solid 1.5px rgba(105, 148, 178,0.42);
    outline-offset: 3px;
    min-width: 78px;
}

.marquee-side-by-side .slide:not(.promoted) .img-cont::after {
    display: none;
}

.marquee-side-by-side .slide:not(.promoted) .content-section {
    padding-inline-start: 15px;
}

/*********/
/*---- PROMOTED SLIDE ----*/
/*********/

.marquee-side-by-side .slide.promoted {
    margin-block-end: 8px;
}

.marquee-side-by-side .slide.promoted .slide-title img {
    max-width: 35px;
}

.marquee-side-by-side .slide.slide.promoted .content-section {
    padding: 18px 25px;
}

.marquee-side-by-side .slide.promoted .slide-title {
    font-size: var(--text-xl);
    line-height: calc(26/20);
}

.marquee-side-by-side .slide.promoted .category {
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.03rem;
    line-height: calc(24/16);
    color: var(--gray-100);
}

@media screen and (min-width: 40em) {
    .core-marquee[data-layout="horizontal"] .slide:not(:nth-child(1)) .slide-title {
        font-size: 1.75rem;
    }
}

@media screen and (min-width: 980px) {
    .marquee-side-by-side {
        padding-block: 98px 120px;
    }

    .marquee-side-by-side .widget-header {
        margin-block-end: 41px;
    }

    .marquee-side-by-side .widget-title {
        font-size: 4.625rem;
        letter-spacing: -0.0462rem;
        line-height: calc(22/74);
    }
    .marquee-side-by-side .widget-header .widget-view-all {
        display: flex;
        line-height: calc(22/15);
    }

    .marquee-side-by-side .widget-view-all.mobile {
        display: none;
    }

    .marquee-side-by-side::before {
        width: 219px;
        height: 101px;
        background-image: url(/includes/public/assets/shared/decorations/Leaf-Right-Blog.svg);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: contain;
    }
    
    .marquee-side-by-side::after {
        content: '';
        pointer-events: none;
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 240px;
        height: 475px;
        background-image: url(/includes/public/assets/shared/decorations/Leaf-Left-Blog.svg);
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: contain;
        z-index: -1;
    }

    .core-marquee[data-layout="horizontal"] .slides {
        grid-template-rows: repeat(4, 1fr);
        column-gap: 74px;
        row-gap: 20px;
        margin-block-end: -10px;
    }

    .core-marquee[data-layout="horizontal"] .slide.promoted {
        grid-row: 1 / span 4;
    }

    .core-marquee[data-layout="horizontal"] .slide:not(:nth-child(1)) .img-cont {
        flex: 0 0 120px;
        outline-offset: 6px;
    }

    .core-marquee[data-layout="horizontal"] .slide:not(:nth-child(1)) .slide-title {
        font-size: 1.375rem;
        font-weight: 800;
        line-height: calc(30/22);
    }

    .marquee-side-by-side .slide .slide-title img {
        translate: 0 -2px;
    }

    .marquee-side-by-side .slide:not(.promoted) .category {
        font-size: var(--text-lg);
        letter-spacing: 0.0338rem;
        line-height: calc(22/18);
    }

    .marquee-side-by-side .slide.promoted .content-section {
        padding: 40px
    }

    .marquee-side-by-side .slide.promoted .slide-title {
        margin-block-start: 7px;
        font-size: 1.75rem;
        font-weight: 800;
        line-height: calc(34/28);
    }

    .marquee-side-by-side .slide.promoted .category {
        font-size: 1.1875rem;
        line-height: calc(22/19);

    }

    .marquee-side-by-side.core-marquee[data-layout="horizontal"] .slides .slide:not(:nth-child(1)) .content-section {
        padding: 0 35px;
    }
}

@media screen and (min-width: 90em) {
    .marquee-side-by-side .widget-header {
        padding-inline-end: 60px;
    }
}