@aware(['page'])
<div class="py-10 sm:py-20 bg-white">
    <div class="flex flex-col sm:flex-row gap-6 items-center">
        <div class="ml-0 sm:ml-8 order-1 sm:order-none px-2">
            <div class="border border-gainsboro p-1 sm:p-3 relative rounded-full">
                <div class="overflow-hidden h-[272px] sm:h-[498px] w-full sm:w-[735px] rounded-full">
                    <img class="object-cover h-full w-full" src="/storage/{{ $imagem }}"/>
                </div>
                <img class="absolute -top-5 left-14 sm:left-32 scale-50 sm:scale-100" src="{{ asset('images/star2.svg') }}" alt="Estrela azulada."/>
                <img class="absolute right-5 -bottom-6 sm:bottom-auto top-auto sm:top-[370px] scale-50 sm:scale-100" src="{{ asset('images/star1.svg') }}" alt="Estrela dourada."/>
                <img class="absolute top-8 -left-3 sm:left-5 scale-50 sm:scale-100" src="{{ asset('images/star3.svg') }}" alt="Estrela prateada."/>
            </div>
        </div>
        <div class="max-w-lg mx-9 sm:ml-0 mr-6 text-left">
            <div class="text-midnightblue-100 text-xs tracking-36">
                {{ $titulo }}
            </div>
            <div class="font-bricolage font-bold max-w-4xl mt-3 mx-auto text-midnightblue-100 text-13xl sm:text-33xl">
                {{ $breveDescricao }}
            </div>
            <div class="leading-6 max-w-4xl mt-5 text-left text-darkslateblue-300">
                {{ $descricao }}
            </div>
            <x-botao-principal href="{{ $botaoUrl }}" class="mt-10">
                {{ $botaoTexto }}
            </x-botao-principal>
        </div>
    </div>
</div>