.cr-image-thumbnail-carousel,
.cr-image-thumbnail-carousel *,
.cr-image-thumbnail-carousel *::after,
.cr-image-thumbnail-carousel *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.cr-image-thumbnail-carousel {
    --cr-items: 5;
    --cr-gap: 0.75rem;
    --cr-border-xl: 20px;
    --cr-border-m: 8px;
    --cr-border-s: 6px;
    --cr-accent-color: hsl(198, 86%, 53%);
    --cr-fill-primary: hsl(204, 3%, 47%);
    --cr-fill-active: hsl(204, 23%, 20%);
    --cr-fill-disabled: hsl(204, 9%, 85%);
    padding: 1rem;
    width: clamp(360px, 90vw, 820px);
    display: flex;
    flex-flow: column;
    gap: 1rem;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    width: min(94vw, 1100px);
    margin-inline: auto;
}

    .cr-image-thumbnail-carousel img {
        height: 100%;
        width: 100%;
        max-width: 100%;
        object-fit: cover;
        display: block;
    }

.cr-image-display {
    border-radius: var(--cr-border-xl);
    overflow: hidden;
    min-height: 30vmin;
    aspect-ratio: 21 / 9;
    box-shadow: 0 0.375em 0.67em #0003, 0 0.5em 1.3em #0002;
}

.cr-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.03);
    animation: cr-fadeIn 700ms ease forwards;
}

@keyframes cr-fadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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

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

.cr-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(--cr-fill-primary);
}

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

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

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

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

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

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

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

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

    .cr-carousel__btn {
        flex-grow: 0;
    }

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

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

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

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

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

    @keyframes cr-show {
        from {
            opacity: 0;
            transform: scale(0);
        }

        to {
            display: block;
            transform: scale(1);
            opacity: 1;
        }
    }
}


.cr-carousel-wrapper {
    
}