.grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Ajoute ces deux lignes : */
.span-3 { grid-column: span 3; }
.span-9 { grid-column: span 9; }

.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  /* Ajoute .span-9 et .span-3 ici aussi */
  .span-9, .span-3, .span-6, .span-4 { grid-column: 1 / -1; }
}