.hero-rotator-heading {
  max-width: 30rem;
}

.hero-rotator {
  display: inline-grid;
  max-width: 100%;
  vertical-align: top;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  clip-path: inset(-0.2em -0.5em);
}

.hero-rotator__word {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
  
.hero-rotator__word.is-active {
  opacity: 1;
  transform: none;
}

.hero-rotator__word.is-leaving {
  opacity: 0;
  transform: translateY(-60%);
}
  
@media (prefers-reduced-motion: reduce) {
  .hero-rotator__word {
     transition: none;
  }
}