.carousel {
    --carousel-height: 560px;
    --carousel-gap: 24px;
    --carousel-scrollbar-height: 4px;
    --carousel-scrollbar-spacing: var(--spacing-40);
    --carousel-track-color: var(--granite-200);
    --carousel-thumb-color: var(--granite-900);
}

/* Full-bleed scroller: images scroll off the viewport edges */
.carousel-viewport {
    container-type: inline-size;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.carousel-viewport::-webkit-scrollbar {
    display: none;
}

.carousel-viewport:focus-visible {
    outline: 2px solid var(--carousel-thumb-color);
    outline-offset: 2px;
}

.carousel-viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* Inline padding matches .container's content edge, so the first and last
   images line up with the container at either end of the scroll */
.carousel-track {
    --carousel-offset: calc(max(0px, (100cqi - 1280px) / 2) + var(--grid-col-inline-margin));

    display: flex;
    gap: var(--carousel-gap);
    width: max-content;
    margin: 0;
    padding: 0 var(--carousel-offset);
    list-style: none;
}

.carousel-item {
    flex: 0 0 auto;
}

.carousel-img {
    display: block;
    width: auto;
    height: var(--carousel-height);
    -webkit-user-drag: none;
    border-radius: var(--corner-radius-sm);
}

/* Custom scrollbar, constrained to .container */
.carousel-scrollbar {
    position: relative;
    height: var(--carousel-scrollbar-height);
    margin-top: var(--carousel-scrollbar-spacing);
    background: var(--carousel-track-color);
    border-radius: var(--carousel-scrollbar-height);
    cursor: pointer;
    touch-action: none;
}

.carousel-scrollbar[hidden] {
    display: none;
}

/* Taller invisible hit area so the thin bar is easy to grab */
.carousel-scrollbar::before {
    content: "";
    position: absolute;
    inset: -10px 0;
}

.carousel-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--carousel-thumb-color);
    border-radius: inherit;
    cursor: grab;
    will-change: transform;
}

.carousel-scrollbar.is-dragging .carousel-scrollbar-thumb {
    cursor: grabbing;
}

@media (max-width: 1250px) {
    .carousel {
        --carousel-height: 340px;
    }
}

@media (max-width: 767px) {
    .carousel {
        --carousel-height: 260px;
    }
}