@props(['title', 'description' => null, 'icon' => null])
{{-- Two-column form section: explanation on the left, fields on the right (stacked on mobile). --}}
<section {{ $attributes->merge(['class' => 'grid grid-cols-1 gap-x-8 gap-y-5 py-7 first:pt-0 last:pb-0 lg:grid-cols-3']) }}>
    <div class="lg:pr-4">
        <h2 class="flex items-center gap-2 text-sm font-semibold text-slate-900">
            @if ($icon)<x-icon :name="$icon" class="size-4 text-brand-600" />@endif
            {{ $title }}
        </h2>
        @if ($description)<p class="mt-1 text-sm text-slate-500">{{ $description }}</p>@endif
    </div>
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-6 lg:col-span-2">
        {{ $slot }}
    </div>
</section>