@aware(['page'])
<div class="hero sticky top-0 overflow-hidden w-full pb-52 pt-[calc(var(--header-height)_+_11rem)] bg-midnightblue-100">
    <div class="max-w-[85.375rem] mx-auto">
        <div class="hidden md:block absolute inset-0 top-[90px] -z-10">
            <x-star class="absolute left-[10%] top-[5%]" width="48px" height="48px" color="yellow"/>
            <x-star class="absolute right-[20%] top-[10%]" width="24px" height="24px" color="white"/>
            <x-star class="absolute right-[5%] bottom-[26%]" width="32px" height="32px" color="yellow"/>
            <x-star class="absolute left-[20%] bottom-[35%]" width="40px" height="40px" color="white"/>
        </div>

        <div class="md:hidden md:absolute inset-0 top-[90px] -z-10">
            <x-star class="absolute left-[10%] top-[18%]" width="40px" height="40px" color="white"/>
            <x-star class="absolute right-[10%] bottom-[29%]" width="32px" height="32px" color="yellow"/>
            <x-star class="absolute right-[25%] bottom-[25%]" width="20px" height="20px" color="white"/>
        </div>

        <div class="w-full">
            <div class="w-full flex items-center bg-cover bg-center">
                <div
                    class="relative box-border grid place-items-center items-center gap-8 mt-[-128px] text-center md:text-left px-8 md:px-16 w-full">
                    <div>
                        @if(isset($sobrancelha))
                            <div
                                class="m-0 text-sky-blue text-center tracking-[0.3em] uppercase font-bricolage text-sm mb-3  w-full">
                                {!! str(html_entity_decode($sobrancelha))->sanitizeHtml() !!}
                            </div>
                        @endif
                        <h1 class="block text-center font-bold leading-none text-13xl text-white sm:text-33xl lg:text-41xl font-bricolage max-w-[50rem] text-balance">
                            {!! str(html_entity_decode($titulo))->sanitizeHtml() !!}
                        </h1>
                    </div>
                    <x-search class="w-full max-w-[564px]"/>
                </div>
            </div>
        </div>
    </div>
</div>