/*
 * Visual module — SD-37
 * Figma: content modules / visual (node 6361-114359)
 * 1–2 media (image / image+pattern / autoplay video) with optional caption.
 * One medium: 50 % or 100 %; two media: 50 % each (stacks on small screens).
 * Module-level layout only — media markup comes from the media-bu component.
 */

.dk-visual {
  padding-block: var(--dk-space-section-s);
  padding-inline: var(--dk-space-page-inline);
  background-color: var(--dk-color-white);
}

.dk-visual__grid {
  display: grid;
  gap: var(--dk-space-teaser-2-clmns); /* L=20px, M=18px, S=56px (stacked) */
  margin-inline: auto;
}

/* One medium, full width */
.dk-visual--full .dk-visual__grid {
  grid-template-columns: 1fr;
  max-inline-size: 88.75rem; /* 1420px — SD-120 revision */
}

/* One medium, half width — centered container, image takes left 50% */
.dk-visual--half .dk-visual__grid {
  grid-template-columns: 1fr;
  max-inline-size: 88.75rem; /* 1420px — SD-120 revision */
}

.dk-visual--half .dk-visual__item {
  max-inline-size: 50%;
}

/* Two media: 50 / 50 from ~700px up; stack below (Figma S / M-S) */
.dk-visual--two .dk-visual__grid {
  grid-template-columns: 1fr 1fr;
  max-inline-size: 88.75rem; /* 1420px — SD-120 revision */
}

/* From 700px: padding drops to S-level early (Figma M/S frame);
   two-media stack; half-width single image goes full width */
@media (max-width: 700px) {
  .dk-visual {
    padding-block: 2.5rem; /* 40px */
  }

  .dk-visual--two .dk-visual__grid {
    grid-template-columns: 1fr;
  }

  .dk-visual--half .dk-visual__item {
    max-inline-size: none;
  }
}

.dk-visual__item {
  min-inline-size: 0; /* let grid items shrink instead of overflowing */
}