/*
  Hero role slot. Kept in a separate file so a stale style.css cache cannot
  leave the three role words flowing inline (Safari aggressively caches CSS).
*/
.hero-role-slot {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  /* Height is set in px by hero-role.js after measuring one line. */
  height: 1.15em;
  text-align: left;
}

.hero-role-track {
  display: block;
  will-change: transform;
}

.hero-role-item {
  display: block;
  line-height: 1.15;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hero-role-track {
    will-change: auto;
  }
}