/* =========================================================
   1. OUTER
   ========================================================= */

.sinn-product-banner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #101315;
}


/* =========================================================
   2. VIEWPORT
   Desktop: 8 / 3
   ========================================================= */

.sinn-product-banner__viewport {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;

    aspect-ratio: 8 / 3;

    overflow: hidden;
    background: #101315;
    isolation: isolate;

    touch-action: pan-y;
}


/* =========================================================
   3. SLIDES
   Horizontal "page turning / paging" movement
   ========================================================= */

.sinn-product-banner__slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    visibility: hidden;
    pointer-events: none;

    transform: translate3d(100%, 0, 0);

    transition:
        transform .72s cubic-bezier(.65, 0, .35, 1);

    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* Current slide */

.sinn-product-banner__slide.is-active {
    z-index: 2;

    visibility: visible;
    pointer-events: auto;

    transform: translate3d(0, 0, 0);
}


/* Leaving current slide when clicking NEXT */

.sinn-product-banner__slide.is-exit-left {
    z-index: 2;

    visibility: visible;
    pointer-events: none;

    transform: translate3d(-100%, 0, 0);
}


/* Leaving current slide when clicking PREV */

.sinn-product-banner__slide.is-exit-right {
    z-index: 2;

    visibility: visible;
    pointer-events: none;

    transform: translate3d(100%, 0, 0);
}


/* Next slide initial position */

.sinn-product-banner__slide.is-enter-right {
    z-index: 3;

    visibility: visible;

    transform: translate3d(100%, 0, 0);

    transition: none !important;
}


/* Previous slide initial position */

.sinn-product-banner__slide.is-enter-left {
    z-index: 3;

    visibility: visible;

    transform: translate3d(-100%, 0, 0);

    transition: none !important;
}


/* Slide that is currently moving into view */

.sinn-product-banner__slide.is-moving-in {
    z-index: 3;

    visibility: visible;

    transform: translate3d(0, 0, 0);
}


/* =========================================================
   4. IMAGE
   ========================================================= */

.sinn-product-banner__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

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

    user-select: none;
    -webkit-user-drag: none;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* =========================================================
   5. SUBTLE SHADE
   ========================================================= */

.sinn-product-banner__viewport::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(16, 19, 21, 0) 72%,
            rgba(16, 19, 21, .14) 100%
        );
}


/* =========================================================
   6. ARROWS
   ========================================================= */

.sinn-product-banner__arrow {
    position: absolute;
    top: 50%;

    z-index: 20;

    width: 46px;
    height: 46px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;

    background: rgba(16, 19, 21, .24);
    color: #fff;

    font-size: 34px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .22s ease;

    -webkit-tap-highlight-color: transparent;
}


.sinn-product-banner__prev {
    left: 22px;
}


.sinn-product-banner__next {
    right: 22px;
}


.sinn-product-banner__arrow:hover {
    background: #FFC500;
    border-color: #FFC500;
    color: #101315;
}


.sinn-product-banner__arrow:active {
    transform: translateY(-50%) scale(.94);
}


/* =========================================================
   7. DOTS
   ========================================================= */

.sinn-product-banner__dots {
    position: absolute;

    left: 50%;
    bottom: 18px;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    transform: translateX(-50%);
}


.sinn-product-banner__dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, .52);

    cursor: pointer;

    transition:
        width .25s ease,
        background-color .25s ease;

    -webkit-tap-highlight-color: transparent;
}


.sinn-product-banner__dot:hover {
    background: rgba(255, 255, 255, .9);
}


.sinn-product-banner__dot.is-active {
    width: 24px;
    background: #FFC500;
}


/* =========================================================
   8. TABLET <= 990px
   ========================================================= */

@media (max-width: 990px) {

    .sinn-product-banner__viewport {
        aspect-ratio: 2.4 / 1;
    }

    .sinn-product-banner__arrow {
        width: 42px;
        height: 42px;
        font-size: 31px;
    }

    .sinn-product-banner__prev {
        left: 14px;
    }

    .sinn-product-banner__next {
        right: 14px;
    }

}


/* =========================================================
   9. MOBILE LANDSCAPE <= 766px
   ========================================================= */

@media (max-width: 766px) {

    .sinn-product-banner__viewport {
        aspect-ratio: 16 / 9;
    }

    .sinn-product-banner__arrow {
        width: 38px;
        height: 38px;
        font-size: 29px;
    }

    .sinn-product-banner__prev {
        left: 8px;
    }

    .sinn-product-banner__next {
        right: 8px;
    }

    .sinn-product-banner__dots {
        bottom: 12px;
        gap: 7px;
    }

    .sinn-product-banner__dot {
        width: 7px;
        height: 7px;
    }

    .sinn-product-banner__dot.is-active {
        width: 20px;
    }

}


/* =========================================================
   10. MOBILE PORTRAIT <= 477px
   ========================================================= */

@media (max-width: 477px) {

    .sinn-product-banner__viewport {
        aspect-ratio: 16 / 9;
    }

    .sinn-product-banner__arrow {
        width: 34px;
        height: 34px;
        font-size: 26px;
    }

    .sinn-product-banner__prev {
        left: 6px;
    }

    .sinn-product-banner__next {
        right: 6px;
    }

    .sinn-product-banner__dots {
        bottom: 9px;
    }

}


/* =========================================================
   11. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sinn-product-banner__slide {
        transition: none !important;
    }

    .sinn-product-banner__arrow,
    .sinn-product-banner__dot {
        transition: none !important;
    }

}