.heroes .box {
  width: min(1040px, 100%);
  background: none;
  border: 0;
  box-shadow: none;
}

.heroes .box header {
  border-bottom: 0;
}

.heroes .box h2 {
  font-size: var(--font-size-xl);
  text-shadow: var(--text-shadow-pixel-md);
}

/* --px is how many screen pixels one sprite pixel takes in the middle; the side cards are scaled
   down from it, and every size on the cards is worked out from it */
.hero-stage {
  --px: 3;

  display: flex;
  align-items: center;
  padding: 4px 0 12px;
}

/* a swipe across the carousel turns it, so only an upward or downward drag may scroll the menu */
#menus .heroes .hero-stage,
#menus .heroes .hero-stage * {
  touch-action: pan-y;
}

.hero-carousel {
  position: relative;
  flex: 1;
  height: calc(var(--px) * 80px + 7rem);
  overflow-x: clip;
}

/* a pixel arrow, four sprite-sized steps to its point, on a button big enough for a thumb */
.hero-step {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 64px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.hero-step[data-step='-1'] {
  scale: -1 1;
}

.hero-step::before {
  content: '';
  width: 16px;
  height: 28px;
  background: var(--color-accent);
  clip-path: polygon(
    0 0,
    25% 0,
    25% 14.29%,
    50% 14.29%,
    50% 28.57%,
    75% 28.57%,
    75% 42.86%,
    100% 42.86%,
    100% 57.14%,
    75% 57.14%,
    75% 71.43%,
    50% 71.43%,
    50% 85.71%,
    25% 85.71%,
    25% 100%,
    0 100%
  );
  animation: hero-step-nudge var(--duration-pulse) var(--easing-step-2) infinite;
}

.hero-step:hover::before {
  background: var(--color-accent-strong);
}

@keyframes hero-step-nudge {
  to {
    translate: 4px 0;
  }
}

@media (max-width: 640px) {
  .heroes .box h2 {
    font-size: var(--font-size-md);
  }
}

@media (max-width: 640px), (max-height: 420px) {
  .hero-stage {
    --px: 2;
  }
}