{{-- Core capabilities (PRD §9.3): auto-fit grid that stays balanced at 4, 5 or more items. --}}
<x-section :vm="$vm">
    <div class="container-site">
        <x-section-heading :eyebrow="$vm->get('eyebrow')" :title="$vm->get('heading')" :subtitle="$vm->get('intro')" class="mb-10" />
        <ul class="grid-auto">
            @foreach ($vm->get('items', []) as $item)
                <li>
                    <x-card class="h-full">
                        <x-icon :name="$item['icon'] ?? null" class="size-8 text-link" />
                        <h3 class="mt-4 text-h4">{{ $item['title'] }}</h3>
                        @if (! empty($item['description']))<p class="mt-2 text-muted">{{ $item['description'] }}</p>@endif
                    </x-card>
                </li>
            @endforeach
        </ul>
    </div>
</x-section>