.hero {
  min-height: 650px;
  padding-top: 132px;
  padding-bottom: 48px;
}

.hero-copy {
  padding-right: 38px;
}

.hero h1 {
  font-size: clamp(43px, 3.65vw, 62px);
}

.hero h1 span {
  display: block;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .hero {
    min-height: 620px;
  }

  .hero h1 {
    font-size: 41px;
  }
}

@media (max-width: 820px) {
  html,
  body,
  .site-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .container {
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
  }

  .hero {
    width: calc(100vw - 36px);
    min-width: 0;
    min-height: auto;
    padding-top: 112px;
    padding-bottom: 54px;
  }

  .hero-copy,
  .hero-media {
    width: 100%;
    min-width: 0;
  }

  .hero-copy {
    padding-right: 0;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(32px, 9.2vw, 37px);
    letter-spacing: -0.045em;
  }

  .hero h1 span {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}