.hero {
  --u: min(1px, 0.0660502cqw);

  position: relative;
  height: calc(700 * var(--u));
  margin-top: 19px;
  border: 1px solid var(--c-line-3);
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  z-index: 0;
  left: 0;
  top: -47.86%;
  width: 135.73%;
  height: 195.71%;
  max-width: none;
  object-fit: cover;
}

.hero__info {
  position: absolute;
  z-index: 1;
  left: calc(145 * var(--u));
  top: calc(155 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(37 * var(--u));
  color: #fff;
}

.hero__eyebrow {
  font-size: calc(24 * var(--u));
  font-weight: 300;
}

.hero__title {
  width: calc(643 * var(--u));
  height: calc(117 * var(--u));
  font-size: calc(123.843 * var(--u));
  font-weight: 700;
  line-height: normal;
}

.hero__lead {
  width: calc(502 * var(--u));
  height: calc(87 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: normal;
}

.hero__actions {
  display: flex;
  gap: calc(21 * var(--u));
}

@media (max-width: 1023px) {
  .hero {
    --u: 1px;
    height: auto;
    min-height: 420px;
    display: flex;
    align-items: center;
    padding: 56px clamp(20px, 6vw, 64px);
  }
  .hero__bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .hero__info {
    position: relative;
    left: auto;
    top: auto;
    gap: clamp(16px, 3.4vw, 37px);
  }
  .hero__title {
    width: auto;
    height: auto;
    font-size: clamp(46px, 11vw, 110px);
    line-height: 1;
  }
  .hero__lead {
    width: auto;
    height: auto;
    max-width: 26ch;
    font-size: clamp(17px, 3vw, 30px);
    line-height: 1.3;
  }
  .hero__eyebrow { font-size: clamp(14px, 2.2vw, 22px); }
}