@media (max-width: 800px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .nav {
    display: block;
    position: relative;
    padding: 13px 5vw;
  }
  .nav img {
    height: 24px;
  }
  .nav-links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-content: stretch;
    gap: 4px;
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
  }
  .source-download {
    position: absolute;
    top: 10px;
    right: 5vw;
    width: 29px;
    height: 29px;
    font-size: 18px;
  }
  .hero, .section, .page-head, .product-shell, .hero > *, .cards, .band-grid {
    min-width: 0;
    max-width: 100%;
  }
  .hero-art {
    width: 100%;
    max-width: 520px;
    justify-self: start;
    min-width: 0;
    overflow: hidden;
  }
  .hero-art img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  .hero h1, .page-head h1, .product-hero2 h1 {
    overflow-wrap: anywhere;
  }
  .card {
    min-width: 0;
  }
  .card img {
    max-width: 100%;
  }
  .model-table {
    display: block;
    overflow-x: auto;
    white-space: normal;
  }
  .model-table th, .model-table td {
    min-width: 110px;
  }
}