/* media-text — image left, copy right, CTA beneath the pair. */

.mtext__inner {
  display: grid;
  /* Was `536fr 1fr`, which is a 536:1 ratio — the image took essentially the
   * whole row and forced the copy into a sliver. The artboard is a 536 image
   * against a ~1070 text column. */
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: var(--space-md);
  align-items: start;
}

.mtext__media {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.mtext__body > * + * { margin-top: var(--space-xs); }
.mtext__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.mtext__body a:hover { color: var(--color-primary); }

.mtext__actions { margin-top: var(--space-md); }

@media (max-width: 992px) {
  .mtext__inner { grid-template-columns: 1fr; }
  .mtext__media { max-width: 32rem; }
}