/* Trava de rolagem horizontal.

   Um único elemento largo demais — tabela, carrossel, imagem, um padding que
   estoura a largura — faz a página inteira deslizar para os lados no celular.
   A correção certa é o elemento rolar dentro da própria caixa; esta folha
   garante que, quando algo escapar, quem não desliza é o documento.

   `clip` em vez de `hidden` de propósito: `overflow-x: hidden` transforma o
   elemento em contêiner de rolagem e quebra todo `position: sticky` dentro
   dele — o trilho de compartilhamento da notícia e os cabeçalhos fixos do
   painel deixariam de grudar. `clip` corta sem criar contêiner de rolagem.
   Navegadores sem suporte a `clip` caem no `hidden` pelo bloco @supports. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* Conteúdo largo deve rolar dentro da própria caixa, não empurrar a página.
   Sem isto a trava acima esconderia parte da tabela sem dar como alcançá-la. */
.table-scroll,
.site-legal-footer pre,
.public-legal-page article > div > pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Mídia nunca é motivo para a página deslizar. */
img, video, canvas, svg, iframe { max-width: 100%; }