<div class="grid-cols-12 product-grid-container" id="all-products-grid">
    <!-- Responsive sizing: Mobile 2col (spread), Tablet 4col (span 3), Desktop 4col (span 3) -->
    <style>
        .col-span-3 {
            grid-column: span 3;
        }

        @media (max-width: 768px) {
            .col-span-3 {
                grid-column: span 6;
            }

            /* 2 columns on mobile */
        }
    </style>

    @for($i = 1; $i <= 12; $i++)
        <div class="col-span-3 product-item" data-category="{{ $i % 3 == 0 ? 'card' : 'phone' }}">
            <div class="product-card">
                <div class="card-thumb">
                    <img src="{{ asset('assets/images/web/giftimg/bookgift.png') }}"
                         alt="사이트명"
                         class="product-img">
                    <div class="thumb-badges">
                        <span class="pay-tag pay-tag--phone">PHONE</span>
                        <span class="pay-tag pay-tag--card">CARD</span>
                        <span class="pay-tag pay-tag--kbank">K-BANK</span>
                        <span class="pay-tag pay-tag--sale">SALE</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3 class="card-title">문화상품권 {{$i}}만원권 즉시발송</h3>
                    <div class="card-price-area">
                        <div class="price-row">
                            <span class="discount">-{{$i}}%</span>
                            <span class="original-price">50,000</span>
                            <span class="price">{{50 - $i}},000</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endfor
</div>
