.alpine-carousel {
    --radius: 10px;
    position: relative;
    .nav-btn {
        position: absolute;
        top: 38%;
        z-index: 10;
        background-color: black;
        opacity: 0.5;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        padding: 5px;
        cursor: pointer;
        transition: opacity 0.2s ease;
        &:hover {
            opacity: 1;
        }
    }
    .nav-btn.prev {
        left: 5px;
    }
    .nav-btn.next {
        right: 5px;
    }
    .main-image-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        overflow-x: auto;
        margin-bottom: 10px;
        border-radius: var(--radius);
        user-select: none;
        -webkit-user-drag: none;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        &::-webkit-scrollbar {
            display: none; /* Chrome, Safari and Opera */
        }
        .main-image {
            scroll-snap-align: start;
            width: 100%;
            height: 100%;
            object-fit: cover;
            flex-shrink: 0;
            img {
                width: 100%;
                height: 100%;
                aspect-ratio: 3/2;
                object-fit: cover;
                border-radius: var(--radius);
                user-select: none;
                -webkit-user-drag: none;
            }
        }
    }
    .thumbnail-strip {
        display: flex;
        flex-direction: row;
        gap: 10px;
        img {
            width: 100px;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: var(--radius);
        }
        .thumbnail {
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.2s ease;
            &.active {
                opacity: 1;
            }
        }
    }
}