@props([
    'cols' => 3,
    'gap'  => 6,
])

@php
    $colMap = [
        1 => 'md:grid-cols-1',
        2 => 'md:grid-cols-2',
        3 => 'md:grid-cols-3',
        4 => 'md:grid-cols-4',
        5 => 'md:grid-cols-5',
        6 => 'md:grid-cols-6',
    ];
    $gapMap = [
        2 => 'gap-2',
        3 => 'gap-3',
        4 => 'gap-4',
        5 => 'gap-5',
        6 => 'gap-6',
        8 => 'gap-8',
    ];
    $colClass = $colMap[(int)$cols] ?? 'md:grid-cols-3';
    $gapClass = $gapMap[(int)$gap]  ?? 'gap-6';
@endphp

<div class="grid grid-cols-1 {{ $colClass }} {{ $gapClass }}">
    {{ $slot }}
</div>
