@props(['eyebrow' => null, 'title', 'href' => null, 'linkLabel' => null])

<div class="mb-stack-md flex items-end justify-between gap-4">
    <div class="rule-start">
        @if ($eyebrow)
            <p class="u-label-sm text-secondary">{{ $eyebrow }}</p>
        @endif
        <h2 class="text-headline-lg-mobile md:text-headline-lg">{{ $title }}</h2>
    </div>

    @if ($href)
        <a href="{{ $href }}" class="u-label-sm shrink-0 text-secondary hover:text-primary">
            {{ $linkLabel ?? __('home.see_all') }} &rsaquo;
        </a>
    @endif
</div>