/* About Us hero follows the supplied exhibition collage reference. */
.about-page .about-hero-collage {
  height:clamp(520px,41.015vw,900px); min-height:0; padding:0; overflow:hidden;
  background:#03152a url("assets/revised-about-hero.svg") center top/100% auto no-repeat;
}
.about-hero-collage .about-hero-copy {
  position:absolute; left:3.85%; top:calc(35.35% - 96px); width:35%; max-width:none;
}
.about-page .about-hero-collage .eyebrow {
  margin:0 0 1.45vw; color:#cef262; font-size:1.22vw;
  line-height:1.4; letter-spacing:0; font-weight:700;
}
.about-page .about-hero-collage h1 {
  font-size:4.52vw; line-height:1.25; letter-spacing:-.08vw; font-weight:700;
}
.about-page .about-hero-collage h1 em { color:#cef262; }
.about-page .about-hero-collage p {
  max-width:31vw; margin:1.8vw 0 0; font-size:1.22vw; line-height:1.5;
}
.about-hero-photos { position:absolute; left:43.37%; top:8.7%; width:51.7%; height:76.2%; }
.about-hero-photos img { position:absolute; display:block; object-fit:cover; border:1px solid #a6aaae; }
.about-hero-photo-tall { left:0; top:0; width:44.5%; height:100%; border-radius:6vw .6vw .6vw .6vw; object-position:65% bottom; }
.about-hero-photo-top { left:46.5%; top:0; width:42.2%; height:46.2%; border-radius:.6vw; object-position:center; }
.about-hero-photo-bottom { left:46.5%; bottom:0; width:53.5%; height:50.4%; border-radius:.6vw 6vw .6vw .6vw; object-position:center 51%; }
@media(max-width:760px) {
  .about-page .about-hero-collage { height:auto; min-height:0; padding:44px 24px 48px; background-size:auto 100%; background-position:center; }
  .about-hero-collage .about-hero-copy { position:relative; left:auto; top:auto; width:100%; }
  .about-page .about-hero-collage .eyebrow { font-size:12px; margin-bottom:16px; }
  .about-page .about-hero-collage h1 { font-size:clamp(36px,7vw,52px); letter-spacing:-.7px; line-height:1.2; }
  .about-page .about-hero-collage p { max-width:360px; margin-top:20px; font-size:14px; line-height:1.6; }
  .about-hero-photos { position:relative; left:auto; top:auto; width:100%; height:auto; aspect-ratio:1.65; margin-top:32px; }
  .about-hero-photo-tall { border-radius:48px 6px 6px 6px; }
  .about-hero-photo-top { border-radius:6px; }
  .about-hero-photo-bottom { border-radius:6px 48px 6px 6px; }
}
.about-hero-photos .about-hero-photo-tall { position:absolute; overflow:hidden; border:1px solid #a6aaae; }
.about-hero-photo-tall img { width:100%; height:100%; border:0; transform:scale(1.65); transform-origin:100% bottom; object-position:center bottom; }

/* Retain the established About hero typography within the new collage. */
.about-page .about-hero-collage h1 { font-size:64px; line-height:1.15; letter-spacing:-1.2px; font-weight:700; }
.about-page .about-hero-collage .eyebrow { font-size:13px; font-weight:700; letter-spacing:1.2px; margin-bottom:18px; }
.about-page .about-hero-collage p { font-size:15px; line-height:1.8; margin-top:24px; }
@media(min-width:761px) and (max-width:1100px) {
  .about-page .about-hero-collage h1 { font-size:48px; }
}
@media(max-width:760px) {
  .about-page .about-hero-collage h1 { font-size:42px; }
}
.about-hero-collage .about-hero-copy { width:39%; }
.about-hero-collage h1 em { white-space:nowrap; }
@media(max-width:760px) { .about-hero-collage .about-hero-copy { width:100%; } }

/* Match the supplied close framing of the two exhibition scenes. */
.about-hero-photos :is(.about-hero-photo-top, .about-hero-photo-bottom) { position:absolute; overflow:hidden; border:1px solid #a6aaae; }
.about-hero-photo-top img { width:100%; height:100%; border:0; transform:scale(1.28); transform-origin:65% 65%; }
.about-hero-photo-bottom img { width:100%; height:100%; border:0; object-position:center 42%; transform:scale(1.28); transform-origin:100% 35%; }