@php
    $variant = $variant ?? 'image';
    $backgroundUrl = $backgroundUrl ?? null;
    $backgroundAlt = $backgroundAlt ?? '';
    $title = $title ?? '';
    $subtitle = $subtitle ?? null;
    $kicker = $kicker ?? null;
    $extra = $extra ?? null;
@endphp
@if ($variant === 'gradient')
    <section class="cart-banner position-relative text-center premium-page-hero premium-page-hero--gradient">
        <div class="container h-100">
            <div class="row h-100 align-items-center justify-content-center text-center">
                <div class="col-12 col-md-10 col-lg-8">
                    @if (!empty($kicker))
                        <p class="premium-page-hero__kicker text-white font-16 font-weight-600 mb-10">{{ $kicker }}</p>
                    @endif
                    @if ($title !== '')
                        <h1 class="font-30 text-white font-weight-bold premium-page-hero__title">{{ $title }}</h1>
                    @endif
                    @if (!empty($subtitle))
                        <p class="premium-page-hero__lead text-white font-16 mt-15 mb-0">{{ $subtitle }}</p>
                    @endif
                    @if (!empty($extra))
                        <div class="premium-page-hero__extra mt-25">{!! $extra !!}</div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@else
    <section class="site-top-banner search-top-banner opacity-04 position-relative premium-page-hero premium-page-hero--image">
        @if (!empty($backgroundUrl))
            @include('web.default.includes.premium.responsive_image', [
                'src' => $backgroundUrl,
                'alt' => $backgroundAlt,
                'class' => 'img-cover premium-page-hero__bg-img',
                'loading' => 'eager',
                'fetchpriority' => 'high',
                'width' => 1920,
                'height' => 640,
            ])
        @endif
        <div class="container h-100">
            <div class="row h-100 align-items-center justify-content-center text-center">
                <div class="col-12 col-md-10 col-lg-8">
                    @if (!empty($kicker))
                        <p class="premium-page-hero__kicker text-white font-16 font-weight-600 mb-10">{{ $kicker }}</p>
                    @endif
                    @if ($title !== '')
                        <h1 class="font-30 text-white font-weight-bold premium-page-hero__title">{{ $title }}</h1>
                    @endif
                    @if (!empty($subtitle))
                        <p class="premium-page-hero__lead text-white font-16 mt-15 mb-0">{{ $subtitle }}</p>
                    @endif
                    @if (!empty($extra))
                        <div class="premium-page-hero__extra mt-25">{!! $extra !!}</div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endif