/**
 * Hero rotator component: sliding titles + icons.
 */
.hero__rotator {
  min-height: 7rem;
  margin-bottom: var(--space-lg);
}

.hero__rotator-inner {
  position: relative;
  height: 7rem;
  overflow: hidden;
}

.hero__rotator:hover .hero__rotator-track {
  animation-play-state: paused;
}

.hero__rotator-track {
  display: flex;
  flex-direction: column;
  height: 700%;
  animation: hero-rotator-slide 21s ease-in-out infinite;
}

.hero__rotator-item {
  flex: 0 0 7rem;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  color: #2d2d2d;
  white-space: nowrap;
  min-height: 7rem;
  padding: 1.75rem 0;
  box-sizing: border-box;
}

.hero__rotator-item i {
  font-size: 1.25em;
  flex-shrink: 0;
  color: var(--color-primary);
}

@keyframes hero-rotator-slide {
  0%, 13% { transform: translateY(0); }
  14%, 27% { transform: translateY(-14.2857%); }
  28%, 41% { transform: translateY(-28.5714%); }
  42%, 55% { transform: translateY(-42.8571%); }
  56%, 69% { transform: translateY(-57.1428%); }
  70%, 83% { transform: translateY(-71.4285%); }
  84%, 100% { transform: translateY(-85.7142%); }
}

@media (max-width: 48rem) {
  .hero__rotator-item {
    font-size: 1.5rem;
  }
}