@props(['eyebrow', 'heading', 'subheading', 'cta' => null, 'image' => true, 'imageSrc' => 'images/hero-image-sarita.webp', 'imageAlt' => 'Saritha Aravinda advising a client', 'minHeight' => 'calc(75vh - 5rem)', 'imageWidthLg' => 'clamp(16rem, 21vw, 22rem)', 'monochrome' => false, 'showLocation' => true, 'locationLabel' => 'Bengaluru · India', 'locationHref' => null, 'paddedBottom' => false])
<section class="overflow-hidden border-b border-grey-200">
    <div @class(['shell grid items-center gap-12 py-16 lg:grid-cols-12 lg:items-end lg:pt-10', 'lg:pb-10' => $paddedBottom, 'lg:pb-0' => !$paddedBottom]) style="min-height: {{ $minHeight }}">
        <div class="relative z-10 order-2 lg:order-none lg:col-span-7 lg:self-center" data-reveal><x-section-eyebrow>{{ $eyebrow }}</x-section-eyebrow><h1 class="display-1 max-w-5xl">{{ $heading }}</h1><p class="mt-8 max-w-2xl text-base leading-7 text-grey-600 md:text-lg md:leading-8">{{ $subheading }}</p>@if($cta)<div class="mt-10"><x-cta-button href="{{ route('contact') }}">{{ $cta }}</x-cta-button></div>@endif</div>
        @if($image)
            <div class="order-1 lg:order-none lg:col-span-5 lg:flex lg:justify-end" data-reveal>
                <div class="relative" style="--hero-img-w: {{ $imageWidthLg ?? '100%' }}">
                    <img src="{{ asset($imageSrc) }}" alt="{{ $imageAlt }}" @class(['aspect-[2/3] w-full object-cover object-top lg:w-[var(--hero-img-w)]', 'grayscale' => $monochrome])>
                    @if($showLocation)
                        @if($locationHref)
                            <a href="{{ $locationHref }}" class="absolute bottom-4 left-4 bg-warm-white px-5 py-3 text-[11px] font-semibold uppercase tracking-[.14em] hover:bg-white">{{ $locationLabel }}</a>
                        @else
                            <span class="absolute bottom-4 left-4 bg-warm-white px-5 py-3 text-[11px] font-semibold uppercase tracking-[.14em]">{{ $locationLabel }}</span>
                        @endif
                    @endif
                </div>
            </div>
        @endif
    </div>
</section>