.media-card {
    height: 191px;
    border-radius: 20px;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.media-card img {
    border-radius: 20px;
}

.media-card__title {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    background: var(--color-white);
    width: max-content;
    bottom: 0;
    padding: 16px 20px;
    border-radius: 20px 20px 0 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.media-card__title h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.media-slider {
    padding: 0 0 57px;
    margin: -20px 0 0;
}

.media-slider .slick-track {
    min-height: 216px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.media-slider .slick-slide {
    margin: 25px 22px 0;
}

.media-card:after {
    content: "\e91b";
    font-family: var(--font-icomoon);
    color: var(--color-primary);
    font-size: 24px;
    right: -8px;
    top: -15px;
    position: absolute;
    opacity: 0;
    transition: all ease-in-out 0.4s;
}

.media-card:before {
    content: "\e91b";
    font-family: var(--font-icomoon);
    color: var(--color-primary);
    font-size: 15px;
    right: -15px;
    top: -25px;
    position: absolute;
    opacity: 0;
    transition: all ease-in-out 0.4s;
}

.media-slider .slick-current .media-card:before,
.media-slider .slick-current .media-card:after,
.media-slider .slick-current .media-card__title {
    opacity: 1;
}

.js-media-slider.slider-has-preloader:not(.slick-initialized) {
    min-height: 490px;
}

/* Enhanced transition handling */
.media-card {
    transition: height 0.4s ease-out;
}

/* Smooth slide width transitions - but not track positioning */
.media-slider .slick-slide {
    transition: width 0.4s ease-out;
}



.media-slider__bottom-content {
    text-align: center;
    margin: 15px 0 0;
}


@media(min-width: 768px) {
    .media-card {
        height: 248px;
    }

    .media-slider.is-done-animating .slick-current .media-card {
        height: 317px;
    }

    .media-slider .slick-slide {
        margin: 53px 16px 0;
    }

    .media-card:after {
        font-size: 50px;
        right: -21px;
        top: -44px;
    }

    .media-card:before {
        font-size: 31px;
        right: -37px;
        top: -61px;
    }

    .media-slider {
        margin: -20px 0 0;
        padding: 0 0 69px;
    }

    .media-card__title h3 {
        font-size: 24px;
    }

    .media-card__title {
        padding: 23px 38px;
    }

    .media-slider__bottom-content {
        padding-left: 175px;
        margin-top: -51px;
    }

    .media-slider .slick-next {
        margin-left: -77px;
    }

    .media-slider .slick-prev {
        margin-left: -156px;
    }

}

@media(min-width: 1200px) {

    .media-slider.is-done-animating .slick-current .media-card {
        height: 413px;
    }

    .media-slider .slick-slide {
        width: 392px !important;
        vertical-align: bottom;
    }

    .media-slider .slick-current,
    .media-slider .slick-current {
        width: 711px !important;
    }

    .media-card:after {
        font-size: 78px;
        right: 20px;
        top: 2px;
    }

    .media-card:before {
        font-size: 56px;
        right: -26px;
        top: -42px;
    }

    .media-slider {
        margin: 0;
        padding: 0;
    }

    .media-slider__bottom-content {
        padding-left: 0;
        margin-top: 0;
        text-align: right;
        padding-right: 64px;
        position: absolute;
        right: 0;
        bottom: 315px;
    }

    .media-slider__wrapper {
        position: relative;
    }
    
    .media-slider .slick-track {
        margin-left: -162px;
    }

    .media-slider .slick-next {
        margin-left: 353px;
    }

    .media-slider .slick-arrow {
        bottom: unset;
        top: 109px;
    }

    .media-slider .slick-prev {
        margin-left: 274px;
    }

    .media-slider .slick-track {
        min-height: 473px;
        display: flex !important;
        align-items: flex-end;
    }
}

@media(min-width: 1600px) {
    .media-slider__bottom-content {
        right: unset;
        bottom: 315px;
        max-width: 1620px;
        width: 100%;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .media-slider .slick-next {
        margin-left: 480px;
    }

    .media-slider .slick-prev {
        margin-left: 401px;
    }

    .media-slider .slick-slide {
        width: 422px !important;
    }

    .media-slider .slick-current,
    .media-slider .slick-current {
        width: 726px !important;
    }

    .media-slider.is-done-animating .slick-current .media-card {
        height: 426px;
    }

     .media-slider .slick-track {
        min-height: 486px;
     }

    .media-slider .slick-track {
        margin-left: -375px;
    }
    

    
    .media-slider .slick-arrow {
        top: 121px;
    }
}