/* Muziek template: media blocks laid out two-up on wide screens,
   stacked single-column back-to-back on narrow/mobile screens. */
.media-grid {
  list-style: none;
  display: grid;
  /* Column 1 (images) is 1/3 of the row, column 2 (videos / yt-playlist) is
     2/3 — both are fr units, so both scale down together as the viewport
     narrows instead of one column staying pinned to a fixed width. Put
     videos in the second grid position (2nd, 4th, ... block). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem 1.5rem;
  width: 90%;
  max-width: 1340px;
  margin: 0 auto 2rem;
  padding: 0;
}

/* min-width: 0 down the whole nested grid chain — without it, a grid item
   won't shrink below its content's specified size (here, the 890px video
   target below), which caused the video column to overflow instead of
   shrinking when the viewport narrowed. The block snippets (video/image)
   add their own inner <figure>, so this is applied generically to every
   level rather than by class. */
.media-grid > li,
.media-grid .media-card,
.media-grid .media-card > figure,
.media-grid .media-card > figure > * {
  min-width: 0;
}

.media-grid .media-card,
.media-grid .media-card > figure {
  width: 100%;
}

.media-grid .media-card figure {
  text-align: center;
}

.media-grid .media-card img {
  max-height: 500px;
  width: auto;
  max-width: 100%;
}

/* 890px wide at 16:9 renders ~500px tall, matching the image target above.
   Pinning the width (rather than 100%/90% of the column) means it holds
   that size until the (now wide) second column can no longer fit it, and
   only then shrinks with the column — same behaviour as the images. */
.media-grid .media-card .video,
.media-grid .media-card .yt-playlist {
  width: min(890px, 100%);
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .media-grid {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 1.5rem;
    margin: 0 auto 1.5rem;
  }
}