/*
 * O layout da Grade num motor sem CSS grid (WebView Chrome 52 da TV box, 2016). O app é escrito em
 * grid; aqui, e só onde grid não existe, cada grade vira flex — o mesmo desenho, sem `gap` (Chrome 84)
 * e sem `dvh` (Chrome 108). Carrega por último para vencer o empate de especificidade. Motor moderno
 * não lê nada disto: `@supports not (display: grid)` é falso nele.
 */
@supports not (display: grid) {
  html { height: 100%; }
  body.grade-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
  }
  body.grade-seo { min-height: 100vh; }
  .grade-work {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }
  .grade-rail { flex: 0 0 13.75rem; }
  .grade-pane { flex: 1 1 auto; }
  .channel-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .channel-cell {
    flex: 1 1 15rem;
    max-width: 100%;
  }
  .grade-paises,
  .atalhos-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .grade-pais,
  .atalhos-row { flex: 1 1 45%; }
}