:root{
  --bento-gap: var(--spacing-6);
  --card-pad: var(--spacing-6);
  --card-radius: var(--radius-card);
}

.bento-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 2.2fr;
  grid-template-rows: auto auto;
  gap: var(--bento-gap);
  margin-top: var(--spacing-3);
  width: 100%;
  box-sizing: border-box;
}

.bento-card {
  background: linear-gradient(180deg, var(--color-white), var(--bg-tertiary));
  border: 1px solid rgba(16, 40, 80, 0.04);
  box-shadow: var(--shadow-md);
  border-radius: var(--card-radius);
  position: relative;
  overflow: hidden;
  padding: var(--card-pad);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card-content {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--spacing-3);
}

.card-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.icon-wrap img{
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-title { margin: 0; font-size: var(--text-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.card-text { font-size: var(--text-base); line-height: var(--line-height-relaxed); color: var(--text-muted); max-width: 100%; margin: 0; }

.card-large { grid-column: 1 / 3; grid-row: 1 / 2; }
.card-vertical { grid-column: 3 / 4; grid-row: 1 / 2; }
.card-compact-a { grid-column: 1 / 2; grid-row: 2 / 3; }
.card-compact-b { grid-column: 2 / 4; grid-row: 2 / 3; }

.bg-blue .icon-wrap { background: linear-gradient(180deg, var(--info-light), #dbeeff); }
.bg-purple .icon-wrap { background: linear-gradient(180deg, #f3eaff, #efe6ff); }
.bg-neutral .icon-wrap { background: linear-gradient(180deg, var(--bg-gray), #f2f4f8); }
.bg-orange .icon-wrap { background: linear-gradient(180deg, var(--warning-light), #ffe9cc); }

@media (max-width: 991px) {
  .bento-grid { grid-template-columns: 1fr; grid-template-rows: none;}
  .card-large, .card-vertical, .card-compact-a, .card-compact-b { grid-column: 1 / -1; grid-row: auto; }
  .card-illustration { position: relative; width: 100%; height: 140px; right: auto; top: auto; bottom: auto; margin-top: var(--spacing-3); }
}