@props([
    'section_name',
    'section_description'
    ])
<div class="grid grid-cols-1 gap-x-8 gap-y-8 md:grid-cols-3">
    <div class="px-4 sm:px-0">
        <h2 class="text-base font-semibold leading-7 text-gray-900">{{ $section_name }}</h2>
        <p class="mt-1 text-sm leading-6 text-gray-600">{{ $section_description }}</p>
    </div>

    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
        {{ $slot }}
    </div>
</div>