.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--unit, 180px);
  gap: var(--gap, 16px);
  padding: 16px;
}
.card[data-size="1x1"] { grid-column: span 1; grid-row: span 1; }
.card[data-size="1x2"] { grid-column: span 2; grid-row: span 1; }
.card[data-size="2x1"] { grid-column: span 1; grid-row: span 2; }
.card[data-size="2x2"] { grid-column: span 2; grid-row: span 2; }
.card[data-size="1x4"] { grid-column: 1 / -1; grid-row: span 1; }   /* tutta la larghezza (banner) */
.card[data-size="2x4"] { grid-column: 1 / -1; grid-row: span 2; }   /* tutta la larghezza, due righe (mappe) */
.card[data-size="3x2"] { grid-column: span 2; grid-row: span 3; }   /* alta: 3 righe × 2 colonne (mappe verticali) */
.card[data-size="4x2"] { grid-column: span 2; grid-row: span 4; }   /* alta: 4 righe × 2 colonne */

@media (max-width: 640px) {
  .dashboard-grid { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
  .card { width: 100%; }
  .card[data-size="1x1"] { aspect-ratio: 1 / 1; }
  .card[data-size="1x2"] { aspect-ratio: 2 / 1; }
  .card[data-size="2x1"] { aspect-ratio: 1 / 2; }
  .card[data-size="2x2"] { aspect-ratio: 1 / 1; }
  .card[data-size="1x4"] { aspect-ratio: auto; min-height: 180px; }
  .card[data-size="2x4"] { aspect-ratio: auto; min-height: 420px; }
  .card[data-size="3x2"] { aspect-ratio: 2 / 3; }
  .card[data-size="4x2"] { aspect-ratio: 1 / 2; }
}