/* One-row card strips: see /js/edge-scroll.js. The scrollbar is hidden (the strip scrolls by swipe,
   trackpad, the edge hover, the arrow buttons or the keyboard) and the ends fade while there is more to see. */
.edge-scroll {
    --fade-left: 0px;
    --fade-right: 0px;
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1rem 0.25rem 1.75rem;   /* room for the cards' shadow, which overflow would otherwise clip */
    margin: -1rem -0.25rem -1.75rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
}
.edge-scroll::-webkit-scrollbar { display: none; }
@media (pointer: coarse) {
    .edge-scroll { scroll-snap-type: x proximity; }
    .edge-scroll > * { scroll-snap-align: start; }
}
/* Uniform cards: every card in a strip has the same width, and the strip's row stretches them to one height. */
.edge-scroll > .strip-card { flex: 0 0 auto; width: min(20rem, 82vw); }