/* =========================================================
   SPLIT — generic 2-column media + text section
   Mobile-first: base = single column, desktop = 2-col split.
   Two variants:
     .split          — media left, content right
     .split--right   — content left, media right
   ========================================================= */

/* ---------------------------------------------------------
   BASE (mobile) — stacked
   --------------------------------------------------------- */
.split,
.split--right {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
.split__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--stone);
}
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------
   DESKTOP (>= 1024px) — 2-column
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-8);
  }
  .split--right {
    grid-template-columns: 1.2fr 1fr;
  }
  .split__media {
    aspect-ratio: 4 / 3;
  }
}