@props(['icon' => 'key'])


{{-- <div {{ $attributes->merge(['class' => 'flex flex-col w-full items-center justify-between gap-2']) }} >--}}


    <div {{ $attributes->merge(['class' => 'mt-2']) }}>

        <div class=" {{-- md:mt-0 --}} {{-- md:col-span-2 --}}">

            <div
                class="p-2 rounded-t-md {{-- sm:px-4 sm:py-5 --}} {{-- dark:bg-emerald-800 bg-emerald-400 dark:bg-opacity-45  --}}">
                <x-section-title>
                    <x-slot name="title">{{ $title }}</x-slot>
                    <x-slot name="description">{{ $description }}</x-slot>
                </x-section-title>
            </div>

            <div
                class="p-2 rounded-b-md {{-- sm:px-4 sm:py-5 --}} {{-- dark:bg-emerald-800 bg-emerald-400 dark:bg-opacity-85 --}} ">
                <div class="p-1">
                    {{ $content }}
                </div>






            </div>
        </div>
    </div>