/* The full club name sits between the background wordmark and the athletes. */
.hero-club-name {
  position: absolute;
  z-index: 3;
  left: 38%;
  top: 60%;
  margin: 0;
  color: var(--ink);
  font-size: clamp(23px, 2.65vw, 42px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .18em;
  white-space: nowrap;
  pointer-events: none;
}
.js:not(.intro-ready) .hero-club-name { opacity: 0; }
.intro-ready .hero-club-name { animation: enter-up .8s .42s var(--ease) both; }

/* Keep every part of the supplied logo visible, including its location line. */
.about { column-gap: 9%; row-gap: 22px; align-items: center; }
.about-intro { grid-column: 1; grid-row: 1; }
.about-copy { grid-column: 1; grid-row: 2; align-self: start; }
.about-copy > p { margin-top: 0; font-size: 17px; }
.club-full-logo {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: min(100%, 370px);
  margin: 0;
  padding: 14px;
  background: white;
  border: 1px solid #e0e6e0;
  border-radius: 14px;
  box-shadow: 12px 12px 0 #cfe9ee;
}
.club-full-logo img { width: 100%; height: auto; object-fit: contain; border-radius: 6px; }

@media (min-width: 761px) and (max-width: 1050px) {
  .hero-club-name { left: 38%; top: 65%; font-size: 24px; letter-spacing: .13em; }
  .club-full-logo { width: min(100%, 320px); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .hero-club-name { left: var(--gutter); top: 59px; font-size: 15px; letter-spacing: .19em; color: #087b9f; }
  .hero-club-prefix { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}
@media (max-width: 760px) {
  .hero-stage { padding-top: 554px; }
  .hero-club-name { left: 24px; top: 521px; font-size: 13px; letter-spacing: .19em; color: #087b9f; }
  .hero-club-prefix { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .about { grid-template-columns: 1fr; gap: 30px; }
  .about-intro, .about-copy, .club-full-logo { grid-column: 1; grid-row: auto; }
  .club-full-logo { width: min(100% - 12px, 320px); box-shadow: 8px 8px 0 #cfe9ee; }
  .about-copy > p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .js:not(.intro-ready) .hero-club-name { opacity: 1; }
  .intro-ready .hero-club-name { animation: none; }
}