/* Give the brand masthead a distinctly narrower footprint than the functional
   application surfaces below it. This keeps the hero compact while leaving the
   player, controls, and setup sections at full width. */
@media (min-width: 861px) {
  .hero-card {
    width: 85%;
    justify-self: center;
  }
}

@media (max-width: 860px) {
  .hero-card {
    width: 100%;
  }
}