.card-rail {
    --card-rail-inline: max(var(--page-inline), calc((100% - var(--section-content-max)) / 2));
    display: grid;
    margin-top: var(--section-content-gap);
    row-gap: var(--space-md);
}

.card-rail__viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--card-rail-inline);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.card-rail__viewport::-webkit-scrollbar {
    display: none;
}

.card-rail__viewport:focus-visible {
    outline: 0.125rem solid var(--color-heading);
    outline-offset: -0.125rem;
}

.card-rail__track {
    position: relative;
    display: flex;
    width: max-content;
    gap: var(--card-rail-gap);
    margin: 0;
    padding: var(--card-rail-shadow-room) var(--card-rail-inline);
    list-style: none;
}

.card-rail__item {
    display: flex;
    width: var(--card-rail-item-width);
    flex: none;
    scroll-snap-align: start;
    transform-origin: 0 50%;
}

.card-rail__controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
}

.card-rail.is-enhanced .card-rail__viewport {
    overflow: hidden;
    cursor: grab;
    scroll-snap-type: none;
    touch-action: pan-y;
    user-select: none;
}

.card-rail.is-enhanced .card-rail__track {
    will-change: transform;
}

.card-rail.is-dragging .card-rail__viewport {
    cursor: grabbing;
}

.card-rail.is-static .card-rail__viewport {
    cursor: auto;
}

.card-rail.is-static .card-rail__controls {
    display: none;
}