.carousel-alpha {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    --carousel-slide-min: 26rem;
    --carousel-slide-max: 36rem;
    --carousel-slide-ideal: 20vw;
    width: 100%;
    .carousel-alpha__track {
        display: grid;
        justify-content: center;
        grid-auto-flow: column;
        grid-auto-columns: clamp(var(--carousel-slide-min), var(--carousel-slide-ideal), var(--carousel-slide-max));
        
        grid-template-rows: repeat(3,auto) 1fr;
        gap: 1.5rem;
        transition: transform 400ms ease-in-out;
        will-change: transform;
        
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .carousel-alpha__nav-buttons {
        display: none;
    }
    .carousel-alpha__item {
        width: 100%;
    }

    .carousel-alpha__viewport {
        padding-block: 0.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        
    }
    &.is-carousel {
            .carousel-alpha__track {
                display: grid;
                justify-content: start;
                grid-auto-flow: column;
                grid-auto-columns: clamp(var(--carousel-slide-min), var(--carousel-slide-ideal), var(--carousel-slide-max));
                width: max-content;
                will-change: transform;
            }
            .carousel-alpha__nav-buttons {
                display: flex;
                justify-content: flex-end;
                gap: 0.75rem;
                .carousel-alpha__nav-button[data-prev].is-disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                }
                .carousel-alpha__nav-button[data-next].is-disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                }
            }

    }
}


@media (width