/**
 * @file
 * Count-adaptive video grid.
 *
 * Every tile is the same size in every mode: sponsors need a grid to read as a
 * grid, so there is deliberately no hero-plus-thumbnails treatment.
 */

.rn-video-grid {
  margin: 0 0 1.75rem;
}

.rn-video-grid__heading {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  line-height: 1.3;
}

/* Single video: no grid chrome at all. */

.rn-video-grid__solo-title {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 600;
}

/* 2-4 and 5+ share one grid; only the track sizing differs. */

.rn-video-grid__items {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rn-video-grid--row .rn-video-grid__items {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rn-video-grid--grid .rn-video-grid__items {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.rn-video-grid__item {
  min-width: 0;
}

.rn-video-grid__title {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.rn-video-grid__title a {
  color: inherit;
  text-decoration: none;
}

.rn-video-grid__title a:hover,
.rn-video-grid__title a:focus-visible {
  text-decoration: underline;
}

/*
 * Mobile: the old matrix used hidden left/right paddle buttons that were
 * undiscoverable on touch. Below 600px the grid becomes a single column and
 * simply stacks; nothing scrolls horizontally.
 */
@media (max-width: 599px) {
  .rn-video-grid__items {
    grid-template-columns: 1fr;
  }
}