/* ==============================================================
   LAYOUT — grid de 12 colunas do site
   Margem lateral de 180px (fixa, via margin — não padding/max-width)
   e gutter de 48px. Usado por .container em toda página; qualquer
   seção com grid usa var(--grid-columns)/var(--grid-gutter) direto.
   ============================================================== */

:root {
  --grid-columns: 12;
  --grid-margin: 180px;
  --grid-gutter: 48px;
}

/* Sem width/max-width: um bloco em auto já ocupa "100% do pai menos
   as margens" sozinho; width:100% + margin somaria as margens por
   cima dos 100%, estourando a viewport. Sem teto de largura — o
   conteúdo preenche o resto da viewport em qualquer tamanho de tela. */
.container {
  margin: 0 var(--grid-margin);
}

@media (max-width: 1440px) {
  .container { margin: 0 144px; }
}

@media (max-width: 900px) {
  .container { margin: 0 40px; }
}

@media (max-width: 640px) {
  .container { margin: 0 20px; }
}