/* ==========================================================================
   LAYOUT.CSS — Introdução Alimentar sem Confusão
   Só estruturas genéricas: container e section. Valores vindos direto de
   docs/Design_System_Landing_Page.xlsx (aba "Design System", linhas
   CONTAINER/SEÇÕES) — mesmo sistema usado no resto do projeto.
   ========================================================================== */
.container {
  width: calc(100% - 40px);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .container {
    width: calc(100% - 64px);
  }
}

@media (min-width: 1024px) {
  .container {
    width: min(calc(100% - 80px), var(--container-max));
  }
}

@media (min-width: 1440px) {
  .container {
    width: min(calc(100% - 160px), var(--container-max-1440));
  }
}

.section {
  padding-block: 64px;
}

@media (min-width: 768px) {
  .section {
    padding-block: 80px;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: 96px;
  }
}

@media (min-width: 1440px) {
  .section {
    padding-block: 120px;
  }
}