Bento Grid (3 Column)

---
/**
 * BentoGrid3 — Modern dashboard grid inspired by Bento-box layouts.
 */
interface Props {
  className?: string;
}

const { className = '' } = Astro.props;
---

<div class="cq-bento-grid3-cq">
<div class={`bento ${className}`}>
  <div class="item wide">
    <slot name="1">
      <h4>Main Highlight</h4>
      <p>Wide key feature metric or banner</p>
    </slot>
  </div>
  <div class="item">
    <slot name="2">
      <h4>Stat Widget</h4>
      <p>Quick KPI</p>
    </slot>
  </div>
  <div class="item">
    <slot name="3">
      <h4>Live Feed</h4>
      <p>Real-time status</p>
    </slot>
  </div>
  <div class="item tall">
    <slot name="4">
      <h4>Analytics</h4>
      <p>Vertical trend tracker</p>
    </slot>
  </div>
</div>
</div>
<style>
  .cq-bento-grid3-cq { container-type: inline-size; }
  .bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 150px;
    gap: 1rem;
    width: 100%;
  }
  .item {
    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .item h4 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 0.25rem 0;
  }
  .item p {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0;
  }
  .wide {
    grid-column: span 2;
  }
  .tall {
    grid-row: span 2;
  }
  @container (max-width: 768px) {
    .bento {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
    }
    .wide {
      grid-column: span 1;
    }
    .tall {
      grid-row: span 1;
    }
  }
</style>