Product Grid Masonry

<section
  class="ws-product-grid"
  style="
    --ws-product-grid-bg: oklch(0.98 0.005 75);
    --ws-product-grid-text: oklch(0.2 0.02 75);
    --ws-product-grid-text-soft: oklch(0.45 0.015 75);
    --ws-product-grid-border: oklch(0.85 0.01 75);
    --ws-product-grid-accent: oklch(0.55 0.15 150);
    --ws-product-grid-action-bg: oklch(0.35 0.02 75);
    --ws-product-grid-action-text: oklch(0.98 0.005 75);
  "
>
  <div class="mx-auto max-w-7xl px-6 py-16 lg:py-24" style="background:var(--ws-product-grid-bg);color:var(--ws-product-grid-text)">
    <h2 class="text-2xl font-bold tracking-tight sm:text-3xl" style="color:var(--ws-product-grid-text)">New Arrivals</h2>
    <p class="mt-2 text-base" style="color:var(--ws-product-grid-text-soft)">Explore our latest collection</p>

    <div class="mt-10 columns-1 gap-6 sm:columns-2 lg:columns-3">
      <!-- Card 1 - Tall with Sale badge -->
      <article class="mb-6 break-inside-avoid rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
        <div class="relative aspect-[3/4]" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300))" role="img" aria-label="Wool Overcoat">
          <span class="absolute left-3 top-3 rounded-full px-3 py-1 text-xs font-semibold" style="background:oklch(0.55 0.2 25);color:var(--ws-product-grid-action-text)">Sale</span>
        </div>
        <div class="p-5">
          <h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Wool Overcoat</h3>
          <div class="mt-2 flex items-baseline gap-2">
            <span class="text-lg font-bold" style="color:var(--ws-product-grid-text)">$189.00</span>
            <span class="text-sm line-through" style="color:var(--ws-product-grid-text-soft)">$249.00</span>
          </div>
        </div>
      </article>

      <!-- Card 2 - Short -->
      <article class="mb-6 break-inside-avoid rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
        <div class="aspect-square" style="background:linear-gradient(135deg, oklch(0.65 0.12 180), oklch(0.55 0.14 230))" role="img" aria-label="Canvas Sneakers"></div>
        <div class="p-5">
          <h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Canvas Sneakers</h3>
          <p class="mt-2 text-lg font-bold" style="color:var(--ws-product-grid-text)">$79.00</p>
        </div>
      </article>

      <!-- Card 3 - With New badge -->
      <article class="mb-6 break-inside-avoid rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
        <div class="relative aspect-[4/5]" style="background:linear-gradient(135deg, oklch(0.72 0.08 100), oklch(0.62 0.12 150))" role="img" aria-label="Linen Shirt">
          <span class="absolute left-3 top-3 rounded-full px-3 py-1 text-xs font-semibold" style="background:var(--ws-product-grid-accent);color:var(--ws-product-grid-action-text)">New</span>
        </div>
        <div class="p-5">
          <h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Linen Shirt</h3>
          <p class="mt-2 text-lg font-bold" style="color:var(--ws-product-grid-text)">$65.00</p>
        </div>
      </article>

      <!-- Card 4 - Short -->
      <article class="mb-6 break-inside-avoid rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
        <div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.68 0.1 40), oklch(0.58 0.13 80))" role="img" aria-label="Leather Belt"></div>
        <div class="p-5">
          <h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Leather Belt</h3>
          <p class="mt-2 text-lg font-bold" style="color:var(--ws-product-grid-text)">$45.00</p>
        </div>
      </article>

      <!-- Card 5 - Tall with Sale badge -->
      <article class="mb-6 break-inside-avoid rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
        <div class="relative aspect-[3/4]" style="background:linear-gradient(135deg, oklch(0.7 0.06 320), oklch(0.6 0.1 350))" role="img" aria-label="Silk Dress">
          <span class="absolute left-3 top-3 rounded-full px-3 py-1 text-xs font-semibold" style="background:oklch(0.55 0.2 25);color:var(--ws-product-grid-action-text)">Sale</span>
        </div>
        <div class="p-5">
          <h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Silk Dress</h3>
          <div class="mt-2 flex items-baseline gap-2">
            <span class="text-lg font-bold" style="color:var(--ws-product-grid-text)">$120.00</span>
            <span class="text-sm line-through" style="color:var(--ws-product-grid-text-soft)">$160.00</span>
          </div>
        </div>
      </article>

      <!-- Card 6 - With New badge -->
      <article class="mb-6 break-inside-avoid rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
        <div class="relative aspect-square" style="background:linear-gradient(135deg, oklch(0.7 0.1 60), oklch(0.6 0.13 100))" role="img" aria-label="Denim Jacket">
          <span class="absolute left-3 top-3 rounded-full px-3 py-1 text-xs font-semibold" style="background:var(--ws-product-grid-accent);color:var(--ws-product-grid-action-text)">New</span>
        </div>
        <div class="p-5">
          <h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Denim Jacket</h3>
          <p class="mt-2 text-lg font-bold" style="color:var(--ws-product-grid-text)">$95.00</p>
        </div>
      </article>
    </div>
  </div>
</section>