@layer layout {
  /* Contenitore centrato con margini laterali fluidi */
  .l-container {
    max-width: calc(var(--container-max) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Colonne che vanno a capo da sole: --split-min = larghezza minima di colonna */
  .l-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--split-min, 420px)), 1fr));
    gap: var(--split-gap, 48px);
  }

  /* Griglia di card: --grid-min = larghezza minima di una card */
  .l-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 280px)), 1fr));
    gap: var(--grid-gap, 20px);
  }

  /* Sezione con spaziatura verticale standard */
  .l-section { padding-block: var(--section-space); }
}