/**
 * Media split: a block of copy beside an image.
 */

.media-split__media { position: relative; }
.media-split__media :is(img, picture) {
  width: 100%;
  aspect-ratio: var(--ms-ratio, 4 / 5);
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/**
 * Cutout variant.
 *
 * The practitioner portrait recovered from the 2016 site is a 269 × 302 PNG
 * cut out against transparency. Two things follow. `cover` would crop it and
 * scale it past its own resolution, so it is `contain` and capped at a size it
 * can actually fill; and a cutout needs a ground to sit on, or it floats on the
 * page with its edges unresolved — which is why the original placed it on a
 * light panel. Replacing it with a full-frame photograph means dropping this
 * class, not editing it.
 */
.media-split__media--cutout {
  display: grid;
  place-items: end center;
  background: linear-gradient(180deg, var(--c-slate-050), var(--bg-warm));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.media-split__media--cutout :is(img, picture) {
  width: auto;
  max-width: 100%;
  max-height: 20rem;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

.media-split__body .section-head { margin-bottom: 0; }
.media-split__actions { margin-top: var(--s-5); }
.media-split__body > * + * { margin-top: var(--s-5); }