contact page, legal pages and category page

resources/views/components/product-grid.blade.php

@@ -1,14 +1,23 @@
 @props([
     'title'    => null,
     'products' => [],
+    'cols'     => 4,
 ])
 
+@php
+    $gridCols = match((int) $cols) {
+        3 => 'grid-cols-2 md:grid-cols-3',
+        2 => 'grid-cols-1 md:grid-cols-2',
+        default => 'grid-cols-2 md:grid-cols-4',
+    };
+@endphp
+
 <section {{ $attributes }}>
     @if($title)
         <h2 class="font-display font-extrabold text-h2 mb-10">{{ $title }}</h2>
     @endif
 
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+    <div class="grid {{ $gridCols }} gap-6">
         @foreach($products as $product)
             <x-ui.product-card
                 :name="$product['name']"