@props([
    'section_name' => false,
    'section_description' => false,
    'first' => false
    ])
@php
    $topPadding = ($first) ? '':'pt-10';
@endphp

<div class="grid grid-cols-1 gap-x-8 gap-y-8 md:grid-cols-4 {{ $topPadding }}">
    <div class="px-4 sm:px-0">
        @if($section_name)
            <h2 {{ $section_name->attributes->merge(['class' => 'text-base font-semibold leading-7 text-gray-900']) }}>{{ $section_name }}</h2>
        @endif

        @if($section_description)
            <p {{ $section_description->attributes->merge(['class' => 'mt-1 text-sm leading-6 text-gray-600']) }}>{{ $section_description }}</p>
        @endif
    </div>

    <div {{ $attributes->merge(['class' => 'bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-3']) }}>
        {{ $slot }}
    </div>
</div>