@media (max-width: 560px) {
  .topbar {
    height: 60px;
    padding-inline: 12px;
    gap: 8px;
  }
  .brand {
    font-size: 19px;
    gap: 5px;
  }
  .brand img {
    width: 33px;
    height: 33px;
  }
  .top-actions {
    gap: 5px;
  }
  .top-actions .btn.small {
    padding-inline: 7px;
    white-space: nowrap;
  }
  .home-intro {
    align-items: start;
  }
  .home-intro .btn {
    padding-inline: 8px;
  }
  .featured-track {
    grid-auto-columns: 47%;
    gap: 10px;
  }
  .spotlight-caption {
    inset-inline: 9px;
    bottom: 10px;
  }
  .spotlight-badge {
    top: 8px;
    left: 8px;
  }
  .spotlight:has(.spotlight-item:nth-child(3)) .featured-controls {
    display: flex;
  }
  .featured-controls {
    padding: 0 4px;
  }
  .featured-controls button {
    width: 31px;
    height: 31px;
  }
  .catalog-main .grid {
    gap: 9px;
  }
  .catalog-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .watch-summary { -webkit-line-clamp: 2; font-size: 15px; }
  .watch-actions .btn { flex: 1 1 calc(50% - 8px); }
  .watch-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .watch-facts dl > div { display: block; padding: 3px 0; }
  .watch-facts dd { text-align: left; }
  .watch-facts .watch-genres { display: none; }
  .related-parts nav {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(116px, max-content);
    overflow-x: auto;
    padding-bottom: 5px;
  }
  .episode-results {
    max-height: 240px;
  }
}