@php
    $count = ['two' => 2, 'two_wide_start' => 2, 'two_wide_end' => 2, 'three' => 3, 'four' => 4][$variant] ?? 2;
    $grid = match ($variant) {
        'two_wide_start' => 'md:grid-cols-3 [&>*:first-child]:md:col-span-2',
        'two_wide_end'   => 'md:grid-cols-3 [&>*:last-child]:md:col-span-2',
        'three'          => 'md:grid-cols-2 lg:grid-cols-3',
        'four'           => 'sm:grid-cols-2 lg:grid-cols-4',
        default          => 'md:grid-cols-2',
    };
    $gap = ['none' => 'gap-0', 'sm' => 'gap-4', 'md' => 'gap-8', 'lg' => 'gap-12'][$block->get('gap', 'md')] ?? 'gap-8';
    $valign = ['start' => 'items-start', 'center' => 'items-center', 'stretch' => 'items-stretch'][$block->get('vertical_align', 'stretch')] ?? 'items-stretch';
    $reverse = $block->get('reverse_on_mobile') ? 'flex-col-reverse md:flex-row' : '';
@endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 {{ $grid }} {{ $gap }} {{ $valign }} {{ $reverse }}">
        @for ($i = 1; $i <= $count; $i++)
            <div class="ec-column min-w-0">
                {!! $renderer->renderChildren($block, 'col' . $i, $ctx) !!}
            </div>
        @endfor
    </div>
</div>
