:root {
    --items: 5;
    --gap: 0.75rem;

    --border-xl: 20px;
    --border-m: 8px;
    --border-s: 6px;

    --accent-color: hsl(198, 86%, 53%);
    --fill-primary: hsl(204, 3%, 47%);
    --fill-active: hsl(204, 23%, 20%);
    --fill-disabled: hsl(204, 9%, 85%);
}

html {
    scroll-behavior: smooth;
}

.image-thumbnail-carousel {
    margin: 1rem auto;
    padding: 1rem;
    width: clamp(360px, 90vw, 820px);
    display: flex;
    flex-flow: column;
    gap: 1rem;
    position: relative;
}
.image-thumbnail-carousel img{
    width: 100%;
    user-select: none;
    background-color: rgba(22, 150, 255, 0.7);
    object-fit: contain;
}
.image-display {
    border-radius: var(--border-xl);
    overflow: hidden;
    min-height: 30vmin;
    aspect-ratio: 16 / 9;
    box-shadow: 0 0.375em 0.67em #0003, 0 0.5em 1.3em #0002;
}

.screen {
    block-size: 100%;
    display: flex;
    background-image: linear-gradient(12deg, #aaa, #eee);
    position: relative;
    user-select: none;
}

.thumbnail-carousel {
    display: flex;
    gap: var(--gap);
    block-size: 100%;
}

.carousel__btn {
    flex: 1 0 max(2.75rem, 5.834%);
    background: #0000;
    border: 1px solid #0000;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.arrow-icon {
    margin-inline: auto;
    outline: none;
    border: 0;
    scale: 1;
    display: inline grid;
    width: max(80%, 1.5rem);
    height: max(80%, 1.5rem);
    fill: var(--fill-primary);
}

.carousel__btn:hover .arrow-icon {
    fill: var(--fill-active);
}

.carousel__btn:disabled {
    opacity: 0.1;
    pointer-events: none;
}

.carousel__slider {
    user-select: none;
    flex-grow: 999;
    list-style: none;
    display: flex;
    gap: var(--gap);
    padding: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.carousel__slider::-webkit-scrollbar {
    display: none;
}

.carousel__slide {
    cursor: pointer;
    border-radius: var(--border-m);
    overflow: hidden;
    scroll-snap-align: center;
    flex: 1 0 calc((100% / var(--items)) - 10px);
}

.active.carousel__slide {
    outline: 0.125em solid var(--accent-color);
    outline-offset: -0.37em;
}

@media (max-width: 680px) {
    .image-thumbnail-carousel {
        width: 90vw;
    }

    .active.carousel__slide {
        background-color: var(--fill-active);
        outline-offset: 3px;
    }

    .carousel__btn {
        flex-grow: 0;
    }

    .thumbnail-carousel {
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel__slider {
        max-width: fit-content;
        align-items: center;
        gap: 1em;
    }

    .carousel__slide {
        flex: none;
        aspect-ratio: 1;
        block-size: 0.625rem;
        border-radius: 50%;
        background-color: var(--fill-primary);
    }

    .thumbnail {
        opacity: 0;
        display: none;
        aspect-ratio: 16 / 9;
        block-size: 8vw;
        position: absolute;
        border-radius: var(--border-s);
        overflow: hidden;
        z-index: 99;
        will-change: transform, opacity;
        transition: opacity 150ms ease-out;
        transform-origin: bottom;
        translate: -50%;
        bottom: 20%;
    }

    .carousel__slide:not(.active):hover .thumbnail {
        opacity: 1;
        display: block;
        animation: show 250ms ease-out forwards;
        box-shadow: 0 0.375em 0.67em #0003, 0 0.5em 1.3em #0002;
    }

    @keyframes show {
        from {
            opacity: 0;
            transform: scale(0);
        }
        to {
            display: block;
            transform: scale(1);
            opacity: 1;
        }
    }
}