/* Founder block (design-direction.md #20). Root class: .mm-about */
.mm-about { display: grid; gap: var(--mm-space-7); align-items: start; } /* P5: was center; the letter is long */
.mm-about__media { width: 100%; max-width: 22rem; }
.mm-about__copy { display: grid; gap: var(--mm-space-5); min-width: 0; }
.mm-about__name { margin-top: calc(-1 * var(--mm-space-3)); font: 600 var(--mm-font-size-h4)/1.3 var(--mm-font-display); color: var(--mm-text); } /* P5: the name line under the H2 */
@media (min-width: 690px) { .mm-about { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
@media (min-width: 1000px) {
  .mm-about { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--mm-space-9); } /* P5: matches .mm-split's columns */
  .mm-about__media { position: sticky; top: calc(var(--mm-header-h-lg) + var(--mm-space-5)); } /* P5 */
}
/* No portrait set: the PHP skips .mm-about__media entirely (not just its contents) and adds this
   modifier, so there's no empty grid column/gap where the image would have gone -- one column at
   every width. Same specificity as the two grid-template-columns rules above (one class each);
   wins on source order alone (declared after both, including the one inside the 1000px media
   query) -- no !important needed. */
.mm-about--no-media { grid-template-columns: minmax(0, 1fr); }