/* Split: two equal halves across the full width, text on one side and media on the other. The media bleeds to the screen edge;
   the text lines up with the 1220px container edge (--split-edge). Stacks on narrow screens. Add .split--reverse to put the media on the left.
   <section class="split">
     <div class="split__text">…text…</div>
     <div class="split__media"><div class="media media--placeholder"></div></div>
   </section> */
.split { --split-edge: max(var(--gutter), calc((100vw - var(--container)) / 2)); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split__text {
  padding: var(--space-8) var(--space-6) var(--space-8) var(--split-edge);
  align-self: center;
}
.split__text > * { margin: 0; }
.split__text > * + * { margin-top: var(--space-5); }
.split__media { min-height: 34.125rem; }   /* 546px, as in Figma */
.split--reverse .split__media { order: -1; }
.split--reverse .split__text { padding: var(--space-8) var(--split-edge) var(--space-8) var(--space-6); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__text, .split--reverse .split__text { padding: var(--space-8) var(--gutter); }
  .split--reverse .split__media { order: 0; }
}