<div class="w-full bg-background border border-border rounded-lg p-6">
  <div class="grid grid-cols-1 md:grid-cols-4 grid-rows-3 gap-4 h-[600px]">
    <div class="md:col-span-2 md:row-span-2 rounded-xl bg-card border border-border shadow-sm p-6 flex flex-col justify-end">
      <h3 class="text-2xl font-bold">Main Highlight</h3>
      <p class="text-muted-foreground mt-2">This is the largest cell in the bento grid.</p>
    </div>
    <div class="md:col-span-2 rounded-xl bg-primary text-primary-foreground p-6 shadow-sm flex flex-col justify-between">
      <div class="text-sm font-medium opacity-80">Statistic</div>
      <div class="text-4xl font-extrabold">98.2%</div>
    </div>
    <div class="rounded-xl bg-card border border-border shadow-sm p-4 flex items-center justify-center text-muted-foreground">Tile A</div>
    <div class="rounded-xl bg-card border border-border shadow-sm p-4 flex items-center justify-center text-muted-foreground">Tile B</div>
    <div class="md:col-span-4 rounded-xl bg-muted border border-border p-6 flex items-center justify-between">
      <div>
        <h4 class="font-semibold">Wide Banner Cell</h4>
        <p class="text-sm text-muted-foreground">Perfect for CTAs or wide charts.</p>
      </div>
      <button class="bg-background border border-input shadow-sm px-4 py-2 rounded-md text-sm font-medium">Action</button>
    </div>
  </div>
</div>