/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container: */

.zoom-img-slider__inner {
    padding: 44px 0 62px;
    background: var(--blue-background-gradient);
    border-radius: var(--box-border-radius-lg);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* titles: */

.zoom-img-slider__title {
    text-align: center;
}
.zoom-img-slider__title span {
    color: var(--white);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* slider: */

.zoom-img-slider__slider-wrapper {
    position: relative;
}

.zoom-img-slider__slide {
    position: relative;
    overflow: hidden;

    transition: all 0.4s ease;
}

.zoom-img-slider__slide.is-next {
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, transparent 12%);
}
.zoom-img-slider__slide.is-prev {
    -webkit-mask-image: linear-gradient(to left, black 90%, transparent 100%);
    mask-image: linear-gradient(to left, black 0%, transparent 12%);
}

.zoom-img-slider__slide img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: var(--box-border-radius-sm);

    transition: transform 0.6s ease;
}

.zoom-img-slider__slide:not(.is-active) img {
    transform: scale(0.55);
}

.zoom-img-slider__slide.is-prev img {
    transform-origin: right center;
}
.zoom-img-slider__slide.is-next img {
    transform-origin: left center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* slider nav: */

.zoom-img-slider__slider-wrapper .splide__arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    justify-content: space-between;
    padding: 0 calc(12% - 55px);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* mobile: */

@media (max-width: 768px) {
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* container: */
    .zoom-img-slider__inner {
        border-radius: 0;
    }

    .page-row--has-sidebar .zoom-img-slider__inner {
        margin-right: -30px;
        margin-left: -30px;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* titles: */

    .zoom-img-slider__title {
        padding: 0 15px;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* slider: */

    .zoom-img-slider__slide img {
        width: 100%;
        height: 200px;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* slider nav: */

    .zoom-img-slider__slider-wrapper .splide__arrows {
        position: relative;
        top: unset;
        transform: none;

        margin-top: 20px;

        justify-content: center;
        gap: 40px;
    }
}