@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="relative z-10">
            <div class="max-w-[85.375rem] mx-auto flex flex-col md:flex-row items-center md:items-start md:justify-between px-8 md:px-16">
                <div class="w-full md:w-1/2 flex flex-col items-center md:items-start text-center md:text-left">
                    @if (isset($sobrancelha))
                        <div class="m-0 text-sky-blue tracking-36 uppercase text-xs sm:text-sm mb-3">
                            {!! str(html_entity_decode($sobrancelha))->sanitizeHtml() !!}
                        </div>
                    @endif
                    <h1
                        class="font-bold leading-none text-13xl text-white sm:text-33xl lg:text-41xl font-headline max-w-[50rem] text-balance">
                        {!! str(html_entity_decode($titulo))->sanitizeHtml() !!}
                    </h1>
                    <div class="mt-8 w-full max-w-[564px] hidden md:block">
                        <x-search :invert="false" />
                    </div>
                </div>

                <div class="w-full md:w-1/2 flex justify-center md:justify-end mt-8 md:mt-0">
                    @foreach ($destaques as $destaque)
                        <img src="{{ asset('storage/' . $destaque['imagem']) }}" alt="{{ $destaque['imagem_alt'] ?? '' }}"
                            class="max-w-full h-auto object-contain max-h-[400px] md:max-h-[500px]">
                    @endforeach
                </div>

                <div class="w-full mt-8 md:hidden">
                    <x-search :invert="false" />
                </div>
            </div>
        </div>
    </div>
</div>