/* layout.css — revised (mobile-first, consistent gutters) */
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.section{padding:22px 0}
.grid{display:grid;gap:16px}

/* Desktop grids */
@media (min-width:980px){
  .grid-2{grid-template-columns:1.25fr .75fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* Mobile polish */
@media (max-width:640px){
  .container{padding:0 16px}
  .section{padding:18px 0}
  .grid{gap:14px}
}