/* =========================================================
   Layout — Grids reutilizáveis
   ========================================================= */

.grid { display: grid; gap: var(--space-5); }

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.split {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split--1-1 { grid-template-columns: 1fr 1fr; }
  .split--2-1 { grid-template-columns: 2fr 1fr; }
  .split--1-2 { grid-template-columns: 1fr 2fr; }
}

.stack > * + * { margin-block-start: var(--space-4); }
.stack-lg > * + * { margin-block-start: var(--space-6); }