@props([
    'section_name',
    'section_description',
    'first' => false
    ])

@php
    $topPadding = ($first) ? '':'pt-10';
@endphp

<div class="grid grid-cols-1 gap-x-8 gap-y-8 md:grid-cols-3 {{ $topPadding }}">
    <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>