/* ==========================================================
   MEDIA GALLERY
   ========================================================== */

.media-gallery-slider {
    --gallery-gap: 36px;
    --gallery-slide-width: 530px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.media-gallery-slider .swiper-wrapper {
    padding-top: 10px;
    padding-bottom: 70px;
}
/*
 * IMPORTANT:
 *
 * Keep Swiper itself at 100%.
 * Do NOT make it 100% + one slide.
 */
 .media-gallery-swiper {
    position: relative;

    width: calc(
        100%
        + var(--gallery-slide-width)
        + var(--gallery-gap)
    );

    left: calc(
        (var(--gallery-slide-width) + var(--gallery-gap)) / -2
    );

    overflow: visible;
}



/* ==========================================================
   SLIDES
   ========================================================== */

.media-gallery-swiper .swiper-slide {
    width: var(--gallery-slide-width);

    height: auto;

    transform-origin: center center;

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================
   CARD
   ========================================================== */

.media-gallery-card {
    position: relative;

    width: 100%;

    aspect-ratio: 530 / 645;

    overflow: hidden;

    border-radius: 40px;

    box-shadow:
        0 20px 46.67px 0 #00000026;
}

/* ==========================================================
   IMAGE
   ========================================================== */

.media-gallery-card__image,
.media-gallery-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   EDGE ROTATIONS
   ========================================================== */

/*
 * Figma:
 *
 * Left partial  = +1.99deg
 * Right partial = -2.98deg
 */

.media-gallery-swiper
.swiper-slide.is-left-partial {
    transform: rotate(-1.99deg);
}


.media-gallery-swiper
.swiper-slide.is-right-partial {
    transform: rotate(2.98deg);
}


/*
 * Tiny positional correction similar to Figma.
 */
.media-gallery-swiper
.swiper-slide.is-left-partial
.media-gallery-card {
    transform: translateX(-5px);
    transform: none;
}


.media-gallery-swiper
.swiper-slide.is-right-partial
.media-gallery-card {
    transform: translateX(5px);
    transform: none;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .media-gallery-slider {
        --gallery-gap: 24px;

        padding-top: 28px;
        padding-bottom: 50px;
    }


    .media-gallery-card {
        border-radius: 30px;
    }

}


@media (min-width: 768px) and (max-width: 1023px) {

    .media-gallery-slider {
        --gallery-gap: 24px;

        padding-top: 28px;
        padding-bottom: 50px;
    }

    .media-gallery-swiper {
        width: calc(
            100%
            + var(--gallery-slide-width)
            + var(--gallery-gap)
        );

        left: calc(
            var(--gallery-slide-width) * -0.28
        );
    }

    .media-gallery-card {
        border-radius: 28px;
    }

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .media-gallery-slider {
        --gallery-gap: 12px;

        padding-top: 32px;
        padding-bottom: 0px;
    }

    .media-gallery-slider .swiper-wrapper {
        padding-bottom: 45px;
    }

.media-gallery-swiper {
    left: calc(
        (var(--gallery-slide-width) + var(--gallery-gap)) / -1.3
    );
}
    /*
     * Mobile Figma uses taller/narrower cards.
     *
     * It is NOT the same 530/645 desktop ratio.
     */
    .media-gallery-card {
        aspect-ratio: 0.55 / 1;

        border-radius: 18px;

        box-shadow:
            0 16px 32px 0 rgba(0, 0, 0, 0.12);
    }


    /*
     * Mobile design doesn't appear to need
     * the strong angled treatment.
     */
    .media-gallery-swiper
    .swiper-slide.is-left-partial,

    .media-gallery-swiper
    .swiper-slide.is-right-partial {
        transform: none;
    }


    .media-gallery-swiper
    .swiper-slide.is-left-partial
    .media-gallery-card,

    .media-gallery-swiper
    .swiper-slide.is-right-partial
    .media-gallery-card {
        transform: none;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 540px) {

    .media-gallery-slider {
        --gallery-gap: 12px;
    }


    .media-gallery-card {
        border-radius: 16px;
        aspect-ratio: 265 / 320;
    }

}