.stories__empty {
    margin: 0;
    font-size: var(--fx-text-font-size-paragraph, 18px);
    color: var(--fx-text-paragraph-default, var(--text-color));
}

.stories__wrap {
    position: relative;
    z-index: 1;
}

.story-slider {
    font-size: 0;
    padding-top: 80px;
    margin: 0 -16px;
}

.story-slider .slick-arrow {
    bottom: auto;
    top: 0;
    margin: 0;
}

.story-slider .slick-prev {
    left: 16px;
}

.story-slider .slick-next {
    right: auto;
    left: 86px;
}

.story-item {
    padding: 0 16px;
}

.story {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 400;
    background: transparent;
}

.story-slider .slick-slide {
    vertical-align: top;
}

.story__image {
    height: 200px;
    position: relative;
}

.story__image img {
    border-radius: 18px;
}

.story__category {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 8px 18px;
    background: var(--primary-opacity-color);
    border-radius: 18px;
    backdrop-filter: blur(2.5px);
    color: var(--white);
    font-size: 14px;
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
}

.story__details {
    margin-top: 10px;
}

.story__title {
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.20em;
    margin-bottom: 10px;
}

.story__hover p {
    margin-bottom: 15px;
}

.stories__bg {
    position: absolute;
    z-index: -1;
    width: 184px;
    right: -35px;
    bottom: -33px;
    height: auto;
    object-fit: contain;
}

.story__hover .btn-tertiary {
    display: inline-flex;
    gap: 8px;
}

.story__hover .btn-tertiary::before {
    top: 0;
}

@media (min-width: 768px) {
    .stories h2 {
        margin-bottom: 32px;
    }

    .story-slider {
        padding-top: 0;
        margin-right: -68px;
    }

    .story-slider .slick-arrow {
        top: -84px;
    }

    .story-slider .slick-prev {
        left: auto;
        right: 152px;
    }

    .story-slider .slick-next {
        right: 68px;
        left: auto;
    }

    .story {
        width: 374px;
    }

    .story__image {
        height: 238px;
    }

    .story__image img {
        border-radius: 24px;
    }

    .story__category {
        left: 12px;
        top: 12px;
        border-radius: 24px;
        font-size: 15px;
    }

    .story__title {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .stories__bg {
        width: 440px;
        right: auto;
        left: -247px;
        bottom: auto;
        top: -80px;
    }

}


@media (min-width: 1200px) {
    .stories h2 {
        margin-bottom: 35px;
    }

    .story-slider {
        padding-top: 0;
        margin-right: -71px;
    }

    .story-slider .slick-arrow {
        top: -100px;
    }

    .story-slider .slick-prev {
        left: 472px;
        right: auto;
    }

    .story-slider .slick-next {
        right: auto;
        left: 556px;
    }

    .stories__wrap {
        width: 2500px;
    }

    

    .story__image {
        height: 323px;
    }

    .story__image img {
        border-radius: 28px;
    }

    .story__category {
        left: 15px;
        top: 15px;
        border-radius: 28px;
        font-size: 16px;
    }

    .story__details {
        margin-top: 22px;
    }

    .story__title {
        font-size: 21px;
        margin-bottom: 0;
    }

    .stories__bg {
        width: 573px;
        right: auto;
        left: -558px;
        bottom: auto;
        top: -0;
    }

    .story__hover {
        display: none;
        margin-top: 17px;
    }

    .story {
        width: 292px;
        flex-shrink: 0;
        display: block;
    }

    /* v3.1: take the slides out of inline-block flow entirely and drive
       their position with translate3d() per slide instead. Width changes
       on .story no longer reflow siblings (each slide is its own absolute
       containing context), and slide transforms animate on the GPU
       compositor in lock-step with the width animation - no main-thread
       reflow vs compositor desync, which was the source of the v3.0
       jitter. See applyLayout() in stories-slider.js for the position
       math. */
    .story-slider .slick-list {
        overflow: hidden;
    }

    .story-slider .slick-track {
        position: relative;
        /* Slick's default float/inline-block flow is bypassed; we just
           need the track to be a positioning context and tall enough to
           contain the absolute slides. */
    }

    .story-slider .slick-slide {
        position: absolute !important;
        top: 0;
        left: 0;
        float: none !important;
        /* Slick's own slick.css ships with `.slick-slide { height: 100%;
           min-height: 1px; }`. With our absolute positioning the slide
           has no defined parent height to inherit from, so 100% resolves
           to 0 and min-height: 1px wins - that's why the .slick-list
           collapsed to a 1px strip on the first attempt. height: auto
           makes the slide size to its actual content (image + title +
           hover content) so the JS-side measurement reads the real
           height. */
        height: auto !important;
    }

    /* Slick is initialised with infinite: true at every breakpoint so
       it has clones available for its native wraparound below 1200px.
       Up here we run our own cyclic positioning on the originals only,
       so the clones (which would otherwise sit at left: 0 on top of
       slide 0 thanks to our absolute rule) need to be hidden. */
    .story-slider .slick-cloned {
        display: none !important;
    }

    /* Width on .slick-slide tracks .story width so the slide container
       grows/shrinks alongside its inner story. Both transitions are
       gated by .is-transitions-enabled so the very first paint (before
       JS finishes applying the initial layout) doesn't animate from
       default to wide. */
    .story-slider .slick-slide {
        width: 324px;
    }

    .story-slider .is-active-slide.slick-slide {
        width: 540px;
    }

    .story-slider.is-transitions-enabled .slick-slide {
        transition: transform 0.35s ease-in-out, width 0.35s ease-in-out;
    }

    .story-slider.is-transitions-enabled .story {
        transition: width 0.35s ease-in-out;
    }

    .is-active-slide .story {
        width: 508px;
    }

    .is-active-slide .story__hover {
        display: block;
    }

    .is-active-slide .story__title {
        /* display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; */
        font-size: 41px;
    } 

    .story:hover {
        color: #065E74;
    }

    .story:hover .story__title {
       color: var(--primary-hover-color);
    }

    .story:hover .story__hover .btn-tertiary::before {
        width: 100%;
        border-radius: 100px;
    }

}