@aware(['page'])
<div class="bg-white my-10 sm:my-20">
    <div class="container mx-auto text-center px-6 max-w-[60rem]">
        @if (!empty($sobrancelha))
            <x-typography.sobrancelha>{{ $sobrancelha }}</x-typography.sobrancelha>
        @endif
        <x-typography.titulo class="{{ empty($descricao) ? 'mb-10' : 'mb-4' }}">
            {{ $titulo }}
        </x-typography.titulo>
        @if (!empty($descricao))
            <p class="text-base text-brand-brown mt-4 mb-6">
                {{ $descricao }}
            </p>
        @endif
    </div>
    <div class="{{ isset($estilo) && $estilo == 'compacto' ? 'px-2 sm:px-0' : '' }}">
        <x-ultimas-novidades :titulo="$titulo ?? null" :sobrancelha="$sobrancelha ?? null" :botaoTexto="$botao ?? null" :estilo="$estilo ?? 'normal'" :limit="$limite ?? 6"
            :marca_id="$marcaId ?? null" />
    </div>
</div>