@media (min-width: 981px) {
  .hero {
    grid-template-columns: minmax(340px, 0.82fr) minmax(460px, 1fr);
    gap: clamp(36px, 5vw, 78px);
    align-items: center;
  }

  .hero-copy {
    grid-column: 1;
    grid-row: 1;
    max-width: 680px;
  }

  .hero-art {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    max-width: 760px;
    height: min(560px, 62vh);
  }

  .hero h1 {
    max-width: 680px;
    font-size: clamp(62px, 7.4vw, 112px);
  }

  .lede {
    max-width: 580px;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1fr);
  }

  .hero h1 {
    font-size: clamp(58px, 7vw, 82px);
  }
}