@props(['columns' => 3, 'gap' => 4])

@php
    $columnClass = [
        2 => 'columns-1 sm:columns-2',
        3 => 'columns-1 sm:columns-2 lg:columns-3',
        4 => 'columns-2 sm:columns-3 lg:columns-4',
    ][$columns] ?? 'columns-1 sm:columns-2 lg:columns-3';
@endphp

{{--
    Masonry via CSS columns — no JavaScript, no layout thrash, and it degrades to
    a single column on narrow viewports. Children must set `break-inside-avoid`
    and a bottom margin; use `.masonry-item` for both.
--}}
<div {{ $attributes->merge(['class' => trim("$columnClass gap-$gap")]) }}>
    {{ $slot }}
</div>