/* 1. Carousel Container Setup */
.carousel-wrapper {
    position: relative;
    max-width: 450px;
}

/* 2. The Scroll Container (Using MDN's recommended approach) */
.carousel-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* The magic for native swiping */
    gap: 1rem; /* Spacing between cards */
    margin: 0;
    padding: 0;
    
    /* Hide the scrollbar for a clean look */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.carousel-list::-webkit-scrollbar {
    display: none;
}

/* 3. The Carousel Items (From MDN) */
.carousel-item {
    flex: 0 0 100%; /* Forces the item to take up 100% of the width */
    scroll-snap-align: center; /* Snaps the card to the center of the list */
    list-style-type: none; /* Removes bullet points */
}

/* 4. Positioning for our Hyperscript Arrow Buttons */
.nav-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
}
.nav-arrow.is-left { left: -5px; }
.nav-arrow.is-right { right: -5px; }