@props(['eyebrow' => null, 'title', 'description' => null, 'align' => 'center'])

<div {{ $attributes->merge(['class' => 'zl-pixel-section-heading ' . ($align === 'center' ? 'mx-auto max-w-3xl' : 'text-start')]) }}>
    @if($eyebrow)
        <span class="zl-pixel-section-eyebrow">{{ $eyebrow }}</span>
    @endif
    <h2 class="mt-3 text-2xl md:text-3xl lg:text-4xl font-black text-navy-900 text-balance">{{ $title }}</h2>
    @if($description)
        <p class="mt-3 text-navy-500 text-base md:text-lg leading-8">{{ $description }}</p>
    @endif
</div>