:root {
    --carousel-position-alignment-2: 100% / 4;
    --carousel-aspect-size: 20vw;
}

.carousel-positioner {
    display: flex;
    justify-content: center;
}

.carousel-positioner.carousel-empty {
    color: white;
    font-size: 24pt;
    margin-top: 2rem;
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 1rem;
}

.carousel-container {
    height: calc(var(--carousel-aspect-size) + 30vw); /* height is vw because the images are using vw and are in a 1:1 aspect ratio */
    overflow-y: hidden;
    max-width: 1800px;
    max-height: 40vh;
    width: 100%;
}

.carousel-image {
    cursor: pointer;
    flex-shrink: 0;
    position: absolute;
    height: auto;
    aspect-ratio: 1 / 1;
    left: -200vw;
    transition: none;
    top: 0;
}

.carousel-image-inner {
    height: auto;
    aspect-ratio: 1 / 1;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.carousel-image.shown {
    transition: left 0.4s ease-in-out, top 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.carousel-image.left-offscreen {
    left: 0%;
    transform: translateX(-200%);
    top: -15%;
    height: 1%;
}

.carousel-image.left {
    left: 0%;
    top: 5%;
    height: 75%;
    transform: translateX(-50%);
}

.carousel-image.middle {
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
}

.carousel-image.right {
    left: 100%;
    top: 5%;
    height: 75%;
    transform: translateX(-50%);
}

.carousel-image.right-offscreen {
    left: 100%;
    transform: translateX(100%);
    top: -15%;
    height: 1%;
}

.carousel-image.tuple-left {
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-110%);
}

.carousel-image.tuple-right {
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(10%);
}

@media screen and (min-width: 600px) {
    .carousel-container {
        height: calc(var(--carousel-aspect-size) + 15vw);
    }

    .carousel-image.left {
        left: 50%;
        top: 5%;
        height: 75%;
        transform: translateX(-190%);
    }
    
    .carousel-image.middle {
        left: 50%;
        top: 0;
        height: 100%;
        transform: translateX(-50%);
    }
    
    .carousel-image.right {
        left: 50%;
        top: 5%;
        height: 75%;
        transform: translateX(90%);
    }
    
}