/* Scale with the hero's aspect ratio and keep the athlete near the content column. */
@media (min-width: 901px) {
  .hero {
    container-type: size;
    background: var(--field);
  }
  .hero-photo {
    inset: 50% max(5cqw, calc(50cqw - 760px)) auto auto;
    width: auto;
    max-width: none;
    height: clamp(100cqh, calc(30cqw + 400px), 120cqh);
    transform: translateY(-50%);
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 88%, transparent);
  }
}