/* ==========================================================================
   AVIVA V3 — respiro de margem das demonstrações
   Carregado depois do CSS de cada site. Só mexe em padding horizontal de
   estruturas (cabeçalho, seções, rodapé) para o conteúdo não encostar na borda.
   Nada de cor, tipografia, grid ou layout.
   ========================================================================== */

@media (min-width: 900px) {
  header,
  .mast,
  .navigation,
  .demo-ribbon {
    padding-left: max(5.5vw, 68px) !important;
    padding-right: max(5.5vw, 68px) !important;
  }

  section,
  .section,
  main > section {
    padding-left: max(6.5vw, 80px);
    padding-right: max(6.5vw, 80px);
  }

  footer {
    padding-left: max(5.5vw, 68px);
    padding-right: max(5.5vw, 68px);
  }
}

/* Telas largas: mais ar entre a borda e o conteúdo. */
@media (min-width: 1400px) {
  section,
  .section,
  main > section {
    padding-left: max(7.5vw, 108px);
    padding-right: max(7.5vw, 108px);
  }

  header,
  .mast,
  .navigation {
    padding-left: max(6.5vw, 92px) !important;
    padding-right: max(6.5vw, 92px) !important;
  }

  footer {
    padding-left: max(6.5vw, 92px);
    padding-right: max(6.5vw, 92px);
  }
}

/* Em telas pequenas garante no mínimo 22 px de respiro, sem apertar grids. */
@media (max-width: 899px) {
  section,
  .section,
  main > section {
    padding-left: max(5.5vw, 24px);
    padding-right: max(5.5vw, 24px);
  }

  header,
  .mast,
  .navigation {
    padding-left: max(5.5vw, 24px) !important;
    padding-right: max(5.5vw, 24px) !important;
  }
}