.hero {
  overflow: hidden;

  background: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--hero-pad-top);
  text-align: center;
}

.hero__title {
  margin-top: clamp(0.625rem, 1.445rem - 0.8vw, 1.25rem);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
}

.hero__subtitle {
  max-width: 46.1875rem;
  margin-top: 1.375rem;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-muted);
}

.hero__cta {
  margin-top: 2.1875rem;
}

.hero__visual {
  width: min(102.875rem, 100%);
  margin: 0.125rem auto 0.3125rem;
}

.hero__fade {
  height: var(--hero-fade-h);
}

@media (max-width: 48rem) {

  .hero__content {
    padding-inline: 0.96875rem;
  }

  .hero__subtitle {
    max-width: 22.4375rem;
  }

  .hero__visual {
    width: 170.41%;
    max-width: none;
    margin: 0 0 0 -35.2%;
  }

  .hero__fade {
    background: linear-gradient(180deg, #000000 30%, var(--color-bg) 100%);
  }
}