Бенто-сетка в веб-дизайне: карточки разного размера в одной сетке

.bento {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(8rem, auto);
  grid-template-areas:
    "hero  hero  num   cal"
    "hero  hero  dark  cal"
    "quote quote sync  sync"
    "team  team  sync  sync";
}

.bento__hero  { grid-area: hero; }
.bento__num   { grid-area: num; }
.bento__cal   { grid-area: cal; }
.bento__dark  { grid-area: dark; }
.bento__quote { grid-area: quote; }
.bento__sync  { grid-area: sync; }
.bento__team  { grid-area: team; }

/* Планшет: две колонки, главная карточка остаётся первой и крупной */
@media (max-width: 63.99rem) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "hero  hero"
      "hero  hero"
      "num   cal"
      "dark  cal"
      "quote quote"
      "sync  team";
  }
}

/* Телефон: одна колонка по порядку важности */
@media (max-width: 39.99rem) {
  .bento {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "num" "quote" "cal" "sync" "team" "dark";
  }
}

.bento--auto {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  grid-auto-rows: 10rem;
  grid-auto-flow: dense;
}

.card--wide { grid-column: span 2; }
.card--tall { grid-row: span 2; }
.card--big  { grid-column: span 2; grid-row: span 2; }

/* На узком экране карточка в две колонки сломала бы сетку */
@media (max-width: 30rem) {
  .card--wide, .card--big { grid-column: auto; }
}

/* Одни отступы, одно скругление, одна поверхность у всех карточек */
.bento--auto > * {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}