/* ============================================================
   about.css — grid layout only
   Areas: intro, photo, story, values, creds, cta
   ============================================================ */

/* Mobile: single column, narrative order */
.bento-grid {
  grid-template-columns: 1fr;
  grid-template-areas:
    "hero"
    "story"
    "creds"
    "values"
    "cta";
}

/* Tablet: photo beside intro, story spans full width */
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero   hero"
      "story   story"
      "creds creds"
      "values  values"
      "cta     cta";
  }
}

/* Desktop: 3 columns, photo anchors right and spans rows */
@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "hero   hero   hero"
      "story   story  creds"
      "values   values   cta";
  }
}