Bento Grid

/* via superdesign.dev/styles/bento-grid */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 tracks: enough span variety without chaos */
  grid-auto-rows: 180px;        /* fixed row unit makes row spans predictable */
  gap: 16px;                    /* ONE consistent gutter everywhere sells the "tray" look */
  grid-auto-flow: dense;        /* backfills holes left by spanning cells */
}

.bento > * {
  background: #f5f5f7;          /* Apple-style soft gray cell; dark variant: #161617 + 1px rgba(255,255,255,0.08) border */
  border-radius: 24px;          /* the large radius IS the signature; under 16px it reads as a plain card grid */
  padding: 24px;
  overflow: hidden;             /* clips edge-to-edge media to the rounded corner */
}

.bento .hero {
  grid-column: span 2;          /* exactly one 2x2 anchor cell creates the hierarchy */
  grid-row: span 2;
}

.bento .wide {
  grid-column: span 2;          /* use grid-column: 1 / -1 for a full-row banner cell */
}

@media (max-width: 768px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento .hero, .bento .wide { grid-column: auto; grid-row: auto; }
}