@props(['title', 'description' => ''])

<div class="hero flex items-center gap-3 md:gap-4 mb-4 md:mb-6">
    @empty(!$slot)
        <div class="hero-left flex-initial w-12 md:w-14">
            {{ $slot }}
        </div>
    @endempty
    <div class="hero-right flex-1">
        <div class="hero-title">
            <h1 class="text-xl md:text-2xl xl:text-3xl font-bold text-gray-800">{{ $title }}</h1>
            @empty(!$description)
                <p class="text-sm md:text-base text-gray-600">{{ $description }}</p>
            @endempty
        </div>
    </div>
</div>