@media (min-width: 768px) {
  .grade-pages { display: flex; align-items: center; }
}
@media (max-width: 767.98px) {
  .watch-add span,
  .watch-fmt .watch-fmt-label { display: none; }
  .watch-add,
  .watch-fmt { width: 1.75rem; padding-left: 0; padding-right: 0; justify-content: center; }
  .watch-fmt .watch-fmt-n { display: none; }
  .grade-watch .modal-title { max-width: 70vw; }
  .player-foot { grid-template-columns: 1fr; }
  .player-foot .player-toolbar { justify-content: flex-start; }
  /* `1fr` puro tem mínimo automático de min-content: a fila de categorias (nowrap, uma por
     categoria do recorte) esticava a coluna e a PÁGINA INTEIRA saía de 390px para ~2400px —
     header, rodapé e os botões da direita do card iam para fora da tela. `minmax(0, 1fr)` +
     `min-width: 0` devolvem o scroll horizontal para dentro da própria fila, que é onde ele
     deve ficar. Reproduz com muitos filtros (ex. BR + português = 24 categorias). */
  .grade-work {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .grade-rail {
    min-width: 0;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--grade-rule);
  }
  .grade-filtros-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25rem;
  }
  .grade-filter {
    width: auto;
    flex: 1 1 auto;
    min-width: 7.5rem;
  }
  .grade-rail-cats {
    flex-direction: row;
    overflow: auto hidden;
    flex: 0 0 auto;
    min-width: 0;
  }
  .grade-rail-btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }
  .grade-rail-btn.active { border-bottom-color: var(--grade-ink); }
  .grade-rail-btn > span:first-of-type { flex: 0 1 auto; }
  .grade-paises { grid-template-columns: 1fr; }
  .pasta-layout { grid-template-columns: 1fr; grid-template-rows: minmax(11rem, 40vh) minmax(0, 1fr); }
  .pasta-side { border-left: 0; border-top: 1px solid var(--grade-rule); }
  .grade-top { flex-wrap: wrap; }
  .grade-top .btn-group .btn span { display: none; }
  .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channel-logo { flex-basis: 5.25rem; height: 5.25rem; padding: .35rem; }
}