/*
 * Teaser Video-List module — SD-41
 * Figma: content modules / teaser / video-list (node 6361-114360)
 * Optional headline (H2) + responsive grid (4→2→1 cols) of film cards.
 * Module-level layout only — cards use the card-film component (SD-77).
 */

.dk-teaser-video-list {
  padding-block: var(--dk-space-section-m);
  padding-inline: var(--dk-space-page-inline);
}

.dk-teaser-video-list__inner {
  max-inline-size: 88.75rem; /* 1420px */
  margin-inline: auto;
}

.dk-teaser-video-list__headline {
  margin: 0 0 var(--dk-space-09); /* 56px — Figma gap between headline and grid */
}

.dk-teaser-video-list__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--dk-space-teaser-2-clmns); /* 20px — Figma gap-x */
  row-gap: var(--dk-space-section-m);          /* 80px — Figma gap-y */
}

.dk-teaser-video-list__item { min-inline-size: 0; }

/* 2 cols from ≤1024px down to ≤375px (Figma: "gerne 2-spaltig bei 700–1023px") */
@media (max-width: 79.9375rem) {
  .dk-teaser-video-list__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--dk-space-section-s); /* 56px at M */
  }
}

/* 1 col only at S */
@media (max-width: 63.9375rem) {
  .dk-teaser-video-list__grid {
    grid-template-columns: 1fr;
    row-gap: var(--dk-space-section-xs); /* 40px at S */
  }
}