/* ============================================================
   Bento — 12-column grid utility for dashboard / page layout.

   The default span is 12 (full row); add a `--span-N` modifier to
   any child to make it take N columns. Active modifiers: 3, 4, 5,
   6, 7, 8, 9, 12.

   Responsive: below 900 px the modifiers fall back to span 12 so
   every child is a full row.

   Used on Dashboard (KPI row, recent earnings + alerts row, trend
   row, activity row), Earnings (KPI row, trend + source row),
   Payouts (KPI row), Settings (section grids).
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-16);
}
.bento > * { grid-column: span 12; }

@media (min-width: 900px) {
  .bento--span-3  { grid-column: span 3; }
  .bento--span-4  { grid-column: span 4; }
  .bento--span-5  { grid-column: span 5; }
  .bento--span-6  { grid-column: span 6; }
  .bento--span-7  { grid-column: span 7; }
  .bento--span-8  { grid-column: span 8; }
  .bento--span-9  { grid-column: span 9; }
  .bento--span-12 { grid-column: span 12; }
}