.format-carousel-track {
  --carousel-gap: 30px;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--carousel-gap)) / 3);
  gap: var(--carousel-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 6px;
  margin: -6px -6px 0;
  padding: 6px 6px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--silver) var(--paper);
}
.format-carousel-track > .format-card { scroll-snap-align: start; }
.format-carousel-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px 25px; margin-top: 24px; }
.format-carousel-controls:not([hidden]) { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.format-carousel-count { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; min-width: 47px; white-space: nowrap; margin-inline-end: 12px; }
.format-carousel-controls button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid var(--silver); border-radius: 0; color: var(--ink); background: var(--surface); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.format-carousel-controls button:hover:not([aria-disabled="true"]) { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.format-carousel-controls button[aria-disabled="true"] { opacity: .35; cursor: default; }
.format-carousel-controls [data-direction="previous"] .arrow { transform: rotate(180deg); }
@media (max-width: 980px) {
  .format-carousel-track { --carousel-gap: 24px; grid-auto-columns: calc((100% - 2 * var(--carousel-gap)) / 2.3); }
}
@media (max-width: 560px) {
  .format-carousel-track { --carousel-gap: 18px; grid-auto-columns: 83%; }
  .format-carousel-footer { gap: 20px 15px; }
  .format-carousel-count { min-width: 35px; margin-inline-end: 4px; }
}