.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding-top: 160px;
  padding-bottom: 160px;
  white-space: pre-wrap;
}
@supports (animation-timeline: scroll()) {
  .hero.exit-while-scroll {
    --range: calc(var(--current-hero-height) * 0.5px);
  }
  @keyframes hero-exit-with-blur {
    0% {
      margin-top: 56px;
    }
    100% {
      opacity: 0;
      margin-top: calc(var(--range) + 56px);
      margin-bottom: calc(-1 * var(--range));
      scale: 0.9;
      filter: var(--filter-blur);
    }
  }
  @keyframes hero-exit {
    0% {
      margin-top: 56px;
    }
    100% {
      opacity: 0;
      margin-top: calc(var(--range) + 56px);
      margin-bottom: calc(-1 * var(--range));
      scale: 0.9;
    }
  }
  .hero.exit-while-scroll {
    will-change: filter, margin-top, margin-bottom, opacity, scale;
    animation-name: hero-exit;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll();
    animation-range: 0 var(--range);
    transform-origin: left -100%;
  }
  .hero.exit-while-scroll.with-blur {
    animation-name: hero-exit-with-blur;
  }
}
.hero .title {
  font-size: 22px;
  color: var(--color-text-secondary);
  font-weight: 200;
  margin: 0;
  transition: font-size 0.5s;
}
.hero .description {
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  transition: font-size 0.5s;
}