{{-- parte acima da dobra --}}
@props(['sobrancelha', 'titulo', 'imagem' => null, 'mobile' => null, 'sobreposicao' => false])
<div {{ $attributes->merge(['class' => 'hero sticky top-0 overflow-hidden relative w-full ' . ($imagem ? ' h-[580px] sm:h-[758px]' : ' pt-[290px] pb-[200px] bg-midnightblue-100')]) }}>
    <div class="h-[inherit] w-full">
        <div class="h-[inherit] w-full flex justify-center items-center bg-cover bg-center"
             x-data="{ isMobile: window.innerWidth <= 768 }"
             style="background-image: {{ $imagem }}"
             x-bind:style="'background-image: url(' + (isMobile ? '{{ $mobile ?? $imagem }}' : '{{ $imagem }}') + ');'"
             @resize.window="isMobile = window.innerWidth <= 768">
            {{ $slot ?? '' }}
            @if($sobreposicao)
                <div class="bg-black/50 absolute inset-0"></div>
            @endif
            <div
                class="max-w-[85.375rem] mx-auto relative box-border flex flex-col items-center mt-[-32px] sm:mt-[-128px] text-center">
                <div>
                    @isset($sobrancelha)
                        <div class="m-0 text-sky-blue tracking-[0.3em] uppercase font-bricolage text-sm">
                            {!! str(html_entity_decode($sobrancelha))->sanitizeHtml() !!}
                        </div>
                    @endisset
                    @isset($titulo)
                        <h1 class="break-keep px-5 sm:px-0 font-bold text-balance text-[2rem] leading-none my-3 text-white sm:text-41xl font-bricolage [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] sm:[text-shadow:none] max-w-[50rem]">
                            {!! str(str_replace('-', '&#8209;', html_entity_decode($titulo)))->sanitizeHtml() !!}
                        </h1>
                    @endisset
                </div>
                {{ $aposTitulo ?? '' }}
            </div>
        </div>
    </div>
</div>