---
/**
 * BentoGrid — 12-column asymmetric bento grid container.
 * Use <BentoTile> as children.
 *
 * Example:
 *   <BentoGrid>
 *     <BentoTile span={6} surface="yellow">...</BentoTile>
 *     <BentoTile span={4} surface="purple-soft">...</BentoTile>
 *   </BentoGrid>
 */
---

<div class="bento-grid stagger">
  <slot />
</div>

<style>
  .bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(80px, auto);
    gap: 16px;
    position: relative;
  }

  @media (max-width: 1024px) {
    .bento-grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  @media (max-width: 640px) {
    .bento-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }
</style>