/* styles/sections/bio-split.css
 * /strategy/ "Meet Drew Dillon": the portrait (400px at most) beside the bio at 1fr and 2fr
 * from 900px; stacked and centred below. On the white page field. */
@layer sections {
  .drew-bio {
    padding-block: var(--space-96);
  }

  .bio-content {
    display: grid;
    gap: var(--space-48);
    align-items: center;
  }

  .bio-image img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: var(--radius-md);
  }

  .bio-text h2,
  .bio-lead,
  .bio-insight {
    margin-bottom: var(--space-24);
  }

  .bio-lead {
    font-weight: 500;
  }

  .bio-insight,
  .bio-connection {
    color: var(--ink-muted);
  }

  .bio-connection {
    font-weight: 500;
  }

  @media (width >= 900px) {
    .bio-content {
      grid-template-columns: 1fr 2fr;
      gap: var(--space-96);
    }

    .bio-image img {
      margin: 0;
    }
  }
}