<div>
    <div class="grid grid-cols-2 gap-2 gap-y-2 xs:gap-4 sm:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4">
        @forelse ($products as $product )
        <x-blesser.element.single-product-card :product="$product" class="border-1 border-secondary rounded-[calc(var(--product-card-radius)-1px)]" />
        @empty
        <!-- Empty Search Result -->
        <div class="w-full flex flex-col gap-y-4 items-center justify-center text-text col-span-4">
            <div class="i-ic-outline-search-off size-24"></div>
            <div class="text-2xl">
                {{ __('we couldn\'t find product') }}
            </div>
        </div>
        @endforelse
    </div>

</div>
