.scroll-snap-carousel {
    --square: 1 / 1;
    --fourthree: 4 / 3;
    --threefour: 3 / 4;
    --hd: 9 / 16;
    --jaws: 1 / 2.39;

    --ratio: calc(100% * var(--threefour));

    --color: #f6f6f6;
    --bgColor: #1b1b1b;

    --swipe-start: -9vh;

    view-timeline-name: --carouselSectionTimeline;

    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & .carousel {
        width: 90vw;
        max-width: 1920px;
        display: flex;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    & .swipe {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        z-index: 2;
        transform: translateY(var(--swipe-start));
        opacity: 1;
        /* transition: all 0.5s ease-out; */

        animation-timeline: --carouselSectionTimeline;
        animation-name: hideSwipeAnimation;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-duration: 1ms;
        animation-range-start: exit -20%;
        animation-range-end: exit -5%;

        & span {
            color: var(--color);
            text-transform: uppercase;
            letter-spacing: 0.1ch;
        }

        & .icon {
            display: block;
            width: 2vmax;
            height: 2vmax;
            overflow: hidden;
            outline: 2px solid var(--color);
            outline-offset: 2px;
            border-radius: 1000px;
            transform: translateX(1ch);
            position: relative;
            top: 0;
            transition: all 0.2s ease-in-out;
            animation-name: swipeAnimation;
            animation-fill-mode: both;
            animation-timing-function: ease-in-out;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    }

    /* &:has(.slide:hover) .swipe {
        opacity: 0.2;
        transform: translateY(-20vh);
    } */

    & .carousel-scroll-container {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        max-height: calc(100vh - 10vw);
        overflow-x: scroll;
        overflow-y: hidden;
        will-change: scroll-position;
        background-color: var(--bgColor);
        display: grid;
        grid-auto-columns: 65%;
        grid-template-rows: 100%;
        grid-row-gap: 10px;
        column-gap: 0.2vmax;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        &::before,
        &::after {
            color: var(--color);
            opacity: 0.2;
            font-size: 5vw;
            display: flex;
            height: 100%;
            grid-row-start: 1;
            grid-row-end: 2;
            background: rgba(20, 20, 20, 0.5);
            flex-direction: column;
            justify-content: center;
        }

        &::before {
            content: '←';
            text-align: end;
            padding-inline-end: 5vw;
        }

        &::after {
            content: '→';
            text-align: start;
            padding-inline-start: 5vw;
        }
    }

    & .slide {
        view-timeline-name: --carouselSlideTimeline;
        view-timeline-axis: inline;
        position: relative;
        width: 100%;
        padding-bottom: var(--ratio);
        margin: 0.2vmax 0;
        grid-row-start: 1;
        grid-row-end: 2;
        scroll-snap-align: center;
        cursor: ew-resize;
        opacity: 0.3;
        filter: saturate(0.1) blur(10px);
        will-change: opacity, filter;

        animation-timeline: --carouselSlideTimeline;
        animation-name: carouselSlideAnimation;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
        animation-duration: 1ms;
        animation-range-start: entry 0%;
        animation-range-end: exit 100%;

        & img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

@keyframes carouselSlideAnimation {
    0% {
        opacity: 0.3;
        filter: saturate(0.1) blur(10px);
    }

    5% {
        opacity: 0.3;
        filter: saturate(0.1) blur(10px);
    }

    50% {
        opacity: 1;
        filter: saturate(1) blur(0);

    }

    95% {
        opacity: 0.3;
        filter: saturate(0.1) blur(10px);
    }

    100% {
        opacity: 0.3;
        filter: saturate(0.1) blur(10px);
    }
}

@keyframes swipeAnimation {
    0% {
        transform: translateX(1ch);
        background-color: transparent;
        opacity: 0.6;
    }

    10% {
        transform: translateX(1ch);
        background-color: transparent;
        outline-offset: 2px;
    }

    20% {
        transform: translateX(1ch);
        background-color: var(--color);
        opacity: 1;
        outline-offset: 0;
    }

    80% {
        transform: translateX(500%);
        background-color: var(--color);
        opacity: 1;
        outline-offset: 0;
    }

    90% {
        transform: translateX(500%);
        background-color: transparent;
        outline-offset: 2px;
    }

    100% {
        transform: translateX(500%);
        background-color: transparent;
        opacity: 0.6;
    }
}

@keyframes hideSwipeAnimation {
    from {
        opacity: 1;
        transform: translateY(var(--swipe-start));
    }

    to {
        opacity: 0.2;
        transform: translateY(2vh);
    }
}