/* About page */

/* hero: red block with the name, photo overlapping on the right, copy below */
.ahero { display: grid; grid-template-columns: calc(1113 * var(--s)) 1fr; grid-template-rows: auto auto; padding-top: calc(123 * var(--s)); }
.ahero__red { grid-column: 1 / 3; grid-row: 1; width: calc(1449 * var(--s)); max-width: 100%; min-height: calc(331 * var(--s)); background: var(--brand); padding: calc(105 * var(--s)) calc(60 * var(--s)) calc(60 * var(--s)) calc(153 * var(--s)); }
.ahero__red h1 { color: var(--white); font-size: var(--t-80); line-height: .81; }
.ahero__img { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: start; position: relative; z-index: 1; margin-top: calc(148 * var(--s)); width: calc(807 * var(--s)); aspect-ratio: 807 / 605; object-fit: cover; }
.ahero__copy { grid-column: 1; grid-row: 2; padding: calc(42 * var(--s)) 0 0 calc(153 * var(--s)); max-width: calc(1057 * var(--s)); }
.ahero__copy h2 { font-size: var(--t-60); }
.ahero__copy p { margin: calc(14 * var(--s)) 0 0; line-height: 1.43; }
@media (max-width: 900px) {
  .ahero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding-top: 0; }
  .ahero__red { grid-column: 1; width: 100%; padding: 36px var(--gutter); min-height: 0; }
  .ahero__img { grid-column: 1; grid-row: 2; margin: 0; width: 100%; justify-self: stretch; }
  .ahero__copy { grid-row: 3; padding: 28px var(--gutter) 0; max-width: none; }
  .ahero__copy p { line-height: 1.5; }
}

/* credentials: collage + copy */
.cred { display: grid; grid-template-columns: calc(790 * var(--s)) 1fr; column-gap: calc(124 * var(--s)); align-items: start; padding: calc(61 * var(--s)) calc(134 * var(--s)) 0 calc(111 * var(--s)); }
.cred__copy { padding-top: calc(107 * var(--s)); }
.cred__copy h2 { font-size: var(--t-60); max-width: 11em; }
.cred__copy p { margin: calc(34 * var(--s)) 0 0; max-width: calc(761 * var(--s)); }
@media (max-width: 900px) { .cred { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--gutter) 0; } .cred__copy { padding-top: 12px; } }

/* the four credentials, then room for the footer's straddling arrow */
.badges--about { padding: calc(138 * var(--s)) calc(100 * var(--s)) calc(275 * var(--s)); }
@media (max-width: 900px) { .badges--about { margin-top: 0; padding: 48px var(--gutter) 110px; } }

@media (max-width: 900px) { .cred__copy p, .cred__copy h2, .ahero__copy { max-width: none; } }