/* Swipe rows (see assets/js/swipe-rows.js): under 640px a long run of cards is a
   row you swipe, one card and a peek of the next, with dots under it. */
.swipe-dots { display: none; }

@media (max-width: 639px) {
  html body .swipe-row {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    margin-inline: calc(-1 * var(--sw-pad, 20px)) !important;
    padding: 4px var(--sw-pad, 20px) 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sw-pad, 20px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    contain: paint;
    max-width: none !important;
    align-items: stretch;
  }
  html body .swipe-row::-webkit-scrollbar { display: none; }
  html body .swipe-row > * {
    flex: 0 0 80% !important;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
  .swipe-dots { display: flex; justify-content: center; gap: 7px; margin: 2px 0 6px; }
  .swipe-dots span { width: 7px; height: 7px; border-radius: 99px; background: currentColor; opacity: .22; transition: width .2s, opacity .2s; }
  .swipe-dots span.is-on { width: 20px; opacity: .75; }
}