/**
 * ============================================================
 * SKEWED CAROUSEL
 * ============================================================
 */


/* ============================================================
   ROOT
   ============================================================ */

.sc-root {
    --card-width:
        clamp(
            220px,
            17vw,
            320px
        );

    --aspect-ratio:
        3 / 4;

    --border-radius:
        10px;

    position:
        relative;

    width:
        100%;

    max-width:
        none;

    box-sizing:
        border-box;

    overflow:
        hidden;

    padding:
        55px
        0
        30px;

    -webkit-user-select:
        none;

    user-select:
        none;

    -webkit-tap-highlight-color:
        transparent;

    touch-action:
        pan-y;
}


/* ============================================================
   TRACK
   ============================================================ */

.sc-track {
    position:
        relative;

    width:
        100%;

    height:
        calc(
            var(--card-width)
            * 4 / 3
        );

    overflow:
        visible;

    perspective:
        none;

    transform-style:
        flat;

    touch-action:
        pan-y;

    cursor:
        grab;
}


.sc-track.is-dragging {
    cursor:
        grabbing;
}


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

.sc-card {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        var(--card-width);

    aspect-ratio:
        var(--aspect-ratio);

    margin:
        0;

    background:
        transparent;

    overflow:
        visible;

    border-radius:
        var(--border-radius);

    transform-origin:
        center center;

    transform-style:
        preserve-3d;

    will-change:
        transform,
        opacity;

    cursor:
        pointer;

    user-select:
        none;

    -webkit-user-drag:
        none;

    transition:
        opacity
        180ms
        ease;
}


.sc-card:active {
    cursor:
        grabbing;
}


/* ============================================================
   FRONT + BACK FACES
   ============================================================ */

.sc-card-face,
.sc-card-front,
.sc-card-back {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    border-radius:
        var(--border-radius);

    background:
        #111;

    transform-style:
        preserve-3d;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;
}


.sc-card-front {
    transform:
        rotateY(0deg);

    z-index:
        2;
}


.sc-card-back {
    transform:
        rotateY(180deg);

    z-index:
        1;

    pointer-events:
        none;
}


/* ============================================================
   LINK
   ============================================================ */

.sc-card-link {
    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        100%;

    color:
        inherit;

    text-decoration:
        none;
}


.sc-card-back
.sc-card-link {
    pointer-events:
        none;
}


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

.sc-image,
.sc-card-front img,
.sc-card-back img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    border-radius:
        inherit;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;
}


/* ============================================================
   ACTIVE / INACTIVE
   ============================================================ */

.sc-card.is-active {
    z-index:
        100;
}


.sc-card.is-inactive {
    z-index:
        10;
}


/* ============================================================
   CAPTION
   ============================================================ */

.sc-caption {
    position:
        absolute;

    z-index:
        10;

    left:
        0;

    right:
        0;

    bottom:
        0;

    box-sizing:
        border-box;

    padding:
        55px
        18px
        17px;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.76) 0%,
            rgba(0, 0, 0, 0.38) 45%,
            rgba(0, 0, 0, 0) 100%
        );

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(4px);

    transition:
        opacity
            280ms
            ease,
        transform
            300ms
            ease,
        visibility
            0s
            linear
            300ms;

    pointer-events:
        none;

    font-family:
        inherit;

    font-size:
        clamp(
            14px,
            0.9vw,
            17px
        );

    font-weight:
        400;

    line-height:
        1.25;

    text-align:
        left;

    text-shadow:
        0
        1px
        3px
        rgba(0, 0, 0, 0.4);
}


.sc-card.is-active
.sc-card-front
.sc-caption {
    opacity:
        1 !important;

    visibility:
        visible;

    transform:
        translateY(0);

    filter:
        none !important;

    transition:
        opacity
            280ms
            ease
            80ms,
        transform
            300ms
            ease
            80ms,
        visibility
            0s;
}


.sc-card.is-inactive
.sc-card-front
.sc-caption {
    opacity:
        0 !important;

    visibility:
        hidden;
}


.sc-card-back
.sc-caption {
    display:
        none !important;
}


/* ============================================================
   TITLE
   ============================================================ */

.sc-title {
    display:
        block;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

    font-family:
        inherit;

    font-size:
        clamp(
            14px,
            0.9vw,
            17px
        ) !important;

    font-weight:
        400;

    line-height:
        1.25;

    letter-spacing:
        0;

    text-align:
        left;

    opacity:
        1 !important;

    text-shadow:
        0
        1px
        3px
        rgba(0, 0, 0, 0.4);
}


.sc-title a,
.sc-caption
.sc-title a {
    color:
        #ffffff !important;

    font:
        inherit;

    text-decoration:
        none !important;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.sc-caption p {
    margin:
        5px
        0
        0;

    padding:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        ) !important;

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.4;
}


/* ============================================================
   CONTROLS
   ============================================================ */

.sc-controls {
    position:
        relative;

    z-index:
        50;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    width:
        100%;

    margin-top:
        26px;
}


/* ============================================================
   ARROWS
   ============================================================ */

.sc-btn,
.sc-prev,
.sc-next {
    appearance:
        none;

    -webkit-appearance:
        none;

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0
        0
        auto;

    width:
        28px;

    height:
        28px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        0;

    background:
        transparent !important;

    color:
        #222;

    font-size:
        0;

    cursor:
        pointer;

    opacity:
        0.72;

    transition:
        opacity
            180ms
            ease,
        transform
            180ms
            ease;
}


/**
 * Thin CSS chevrons.
 */
.sc-prev::before,
.sc-next::before {
    content:
        '';

    display:
        block;

    width:
        7px;

    height:
        7px;

    border-style:
        solid;

    border-color:
        currentColor;

    border-width:
        0
        1.5px
        1.5px
        0;
}


.sc-prev::before {
    transform:
        rotate(135deg);
}


.sc-next::before {
    transform:
        rotate(-45deg);
}


.sc-btn:hover,
.sc-prev:hover,
.sc-next:hover {
    background:
        transparent !important;

    opacity:
        1;

    transform:
        scale(1.08);
}


.sc-btn:active,
.sc-prev:active,
.sc-next:active {
    transform:
        scale(0.92);
}


.sc-btn:disabled,
.sc-prev:disabled,
.sc-next:disabled {
    opacity:
        0.22;

    cursor:
        default;

    transform:
        none;
}


.sc-btn:focus-visible,
.sc-prev:focus-visible,
.sc-next:focus-visible {
    outline:
        1px
        solid
        currentColor;

    outline-offset:
        3px;
}


/* ============================================================
   DOTS
   ============================================================ */

.sc-dots {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        18px;
}


.sc-dot {
    appearance:
        none;

    -webkit-appearance:
        none;

    display:
        block;

    width:
        34px;

    height:
        4px;

    flex:
        0
        0
        34px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        #d4d4d4;

    opacity:
        1;

    cursor:
        pointer;

    transition:
        background-color
            220ms
            ease,
        opacity
            220ms
            ease;
}


.sc-dot:hover {
    background:
        #aaaaaa;
}


.sc-dot.is-active {
    background:
        #333333;

    opacity:
        1;
}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (
    min-width: 1600px
) {

    .sc-root {
        --card-width:
            clamp(
                260px,
                16vw,
                325px
            );

        padding-top:
            60px;
    }
}


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

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

    .sc-root {
        --card-width:
            clamp(
                210px,
                27vw,
                285px
            );

        padding:
            45px
            0
            26px;
    }


    .sc-controls {
        margin-top:
            24px;

        gap:
            15px;
    }


    .sc-dot {
        width:
            26px;

        flex-basis:
            26px;
    }
}


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

@media (
    max-width: 767px
) {

    .sc-root {
        --card-width:
            min(
                80vw,
                300px
            );

        padding:
            30px
            0
            22px;
    }


    .sc-track {
        width:
            100%;

        height:
            calc(
                var(--card-width)
                * 4 / 3
            );

        overflow:
            visible;
    }


    .sc-card.is-inactive {
        pointer-events:
            none;
    }


    .sc-controls {
        margin-top:
            22px;

        gap:
            10px;
    }


    .sc-btn,
    .sc-prev,
    .sc-next {
        width:
            26px;

        height:
            26px;
    }


    .sc-prev::before,
    .sc-next::before {
        width:
            6px;

        height:
            6px;

        border-width:
            0
            1.5px
            1.5px
            0;
    }


    .sc-dots {
        gap:
            6px;
    }


    .sc-dot {
        width:
            18px;

        height:
            3px;

        flex-basis:
            18px;
    }


    .sc-caption {
        padding:
            42px
            14px
            14px;

        font-size:
            14px;
    }


    .sc-title {
        font-size:
            14px !important;
    }
}


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

@media (
    max-width: 480px
) {

    .sc-root {
        --card-width:
            min(
                78vw,
                270px
            );

        padding-top:
            26px;
    }


    .sc-controls {
        margin-top:
            20px;

        gap:
            8px;
    }


    .sc-btn,
    .sc-prev,
    .sc-next {
        width:
            24px;

        height:
            24px;
    }


    .sc-prev::before,
    .sc-next::before {
        width:
            5px;

        height:
            5px;
    }


    .sc-dots {
        gap:
            5px;
    }


    .sc-dot {
        width:
            14px;

        height:
            3px;

        flex-basis:
            14px;
    }


    .sc-caption {
        padding:
            38px
            12px
            12px;
    }


    .sc-title,
    .sc-caption {
        font-size:
            13px !important;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .sc-caption,
    .sc-dot,
    .sc-btn,
    .sc-prev,
    .sc-next {
        transition:
            none !important;
    }
}