:root {
  --raio-md: 2rem;
  --raio-lg: 3.2rem;
  --raio-xl: 4.8rem;
  --container: min(1560px, 90%);
}

/* --escala-texto vem do painel de acessibilidade (1 = tamanho normal).
   Como todo o site usa rem, mudar o tamanho da raiz aumenta texto e espaços juntos. */
html {
  font-size: calc(clamp(45%, 0.52083vw, 62.5%) * var(--escala-texto, 1));
}

@media (max-width: 991px) {
  html {
    font-size: calc(62.5% * var(--escala-texto, 1));
  }
}

.container {
  width: var(--container);
  margin-inline: auto;
}

/* Com rem fluido a divisa entre duas seções cai em pixel quebrado e aparecia uma linha fina
   entre elas. Cada seção sobrepõe 1px da anterior para esconder. */
main > section + section {
  margin-top: -0.1rem;
}