/* Genres form the first group; Faces is always below that group, in both hero slides. */
.hero-nav { flex-direction: column; gap: 1rem; max-width: 100%; }
.hero-genre-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem 1rem; max-width: 100%; }
.hero-nav .hero-nav-link { white-space: nowrap; }
@media (max-width: 760px) {
  .hero-nav { margin-top: 2rem; }
  .hero-nav .hero-nav-link { font-size: clamp(.6rem, 1.6vw, .8rem); letter-spacing: .1em; }
  .hero-genre-nav { gap: .7rem .6rem; }
}