/**
 * Layout only. Colour, spacing scale and typography are deliberately left to
 * the Site Studio component that wraps this block, so the module does not
 * fight the theme.
 */

.graphicasts {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* auto-fit collapses empty tracks, so 1, 2, 5 or 7 items all lay out
     sensibly without any count-specific rules. */
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.graphicasts__item {
  margin: 0;
  margin-bottom: 1rem;
}

.graphicasts__link {
  display: block;
}

.graphicasts__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.graphicasts__image {
  display: block;
  width: 100%;
  height: auto;
  /* Reserves space before the remote image loads. Confirm the real ratio of
     the feed's images and adjust if it is not 16:9. */
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* These panels are dense images of text. Below the point where a single
   column is narrower than roughly 20rem they stop being legible, so the grid
   above intentionally never produces more than one column on small screens. */
@media (max-width: 40rem) {
  .graphicasts {
    grid-template-columns: 1fr;
  }
}