/* Align the copy with the empty left side of the contained 1983 x 793 image.
   At the 780px hero height limit, the visible image is 1950.57px wide. */
@media (min-width: 761px) {
  .hero .hero-image {
    object-fit: contain;
    object-position: center top;
  }

  .hero .hero-inner {
    width: min(34vw, 663px);
    max-width: none;
    margin-left: calc(max(0px, (100% - 1950.57px) / 2) + min(10vw, 195px));
    margin-right: 0;
    padding-top: clamp(125px, 12.5vw, 230px);
  }

  .hero .hero-inner > .eyebrow {
    font-size: clamp(11px, .75vw, 12px);
    margin-bottom: 14px;
  }

  .hero .hero-inner h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(30px, 3.4vw, 62px);
    line-height: 1.08;
    letter-spacing: -.04em;
  }

  .hero .hero-description {
    max-width: 100%;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.6;
    margin-top: 18px;
  }

  .hero .hero-description br {
    display: block;
  }

  .hero .hero-inner .actions {
    width: 100%;
    max-width: 100%;
    margin-top: 22px;
    gap: 12px;
    flex-wrap: wrap;
  }

  .hero .hero-inner .button {
    min-height: 48px;
    padding: 14px 18px;
    font-size: 14px;
  }
}