/* assets/css/bento.css
   Bento grid utilities. Six-column base, collapses to one column on mobile. */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.bento-cell { grid-column: span 6; }
.bento-cell--hero   { grid-column: span 4; }
.bento-cell--side   { grid-column: span 2; }
.bento-cell--third  { grid-column: span 2; }
.bento-cell--half   { grid-column: span 3; }
.bento-cell--full   { grid-column: span 6; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; gap: 10px; }
  .bento-cell,
  .bento-cell--hero,
  .bento-cell--side,
  .bento-cell--third,
  .bento-cell--half,
  .bento-cell--full { grid-column: span 1; }
}