@props(['banner', 'class' => 'aspect-[16/7]', 'tone' => 'bg-tertiary text-on-tertiary'])
@php $tag = $banner->link ? 'a' : 'div'; @endphp
<{{ $tag }} @if ($banner->link) href="{{ $banner->link }}" @endif {{ $attributes->merge(['class' => 'group relative block overflow-hidden rounded-[40px] ' . $tone . ' ' . $class]) }}>
    @if ($banner->image)<img src="{{ $banner->image }}" alt="{{ $banner->title }}" class="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105" loading="lazy">@endif
    @if ($banner->image && ($banner->title || $banner->subtitle || $banner->button_text))<span class="absolute inset-0 bg-gradient-to-r from-black/55 via-black/15 to-transparent" aria-hidden="true"></span>@endif
    <span class="relative flex h-full flex-col justify-center gap-2 p-6 sm:p-10 {{ $banner->image ? 'text-white' : '' }}">
        @if ($banner->title)<span class="max-w-xl text-2xl font-extrabold leading-tight tracking-tight sm:text-5xl">{{ $banner->title }}</span>@endif
        @if ($banner->subtitle)<span class="max-w-lg text-base sm:text-lg {{ $banner->image ? 'text-white/90' : 'opacity-80' }}">{{ $banner->subtitle }}</span>@endif
        @if ($banner->button_text)<span class="mt-3 inline-flex w-fit min-h-[48px] items-center rounded-full bg-white px-6 text-[15px] font-bold text-primary">{{ $banner->button_text }}</span>@endif
    </span>
</{{ $tag }}>