.text-rotator {

    position: relative;
    overflow: hidden;
    vertical-align: baseline;
    cursor: default;
  }
  
.text-rotator-inner {
    display: inline-flex;
    overflow: hidden;
    position: relative;
    vertical-align: baseline;
  }

.text-rotator-inner span {
    display: inline-block;
    white-space: nowrap;
    opacity: 0;
    position: absolute;
    left: 0;
    transform: translateY(1.4em);
    transition:
      opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
  }
  
.text-rotator-inner span.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
  }
  
/*
@media (prefers-reduced-motion: reduce) {
    .text-rotator-inner span {
      transition: none !important;
    }
  }
*/