@aware(['page'])
<div class="my-10 sm:my-20 py-20 px-8 lg:px-20 bg-midnightblue-100 rounded-[50px]">
    <div class="max-w-[42.5rem] mx-auto text-center">
        @if(!empty($sobrancelha))
            <x-typography.sobrancelha>{{ $sobrancelha }}</x-typography.sobrancelha>
        @endif
        <x-typography.titulo class="text-white">
            {{ $titulo }}
        </x-typography.titulo>
    </div>
    {{-- Desktop: Linha vai até metade do espaço (400px) da esquerda. Atravessando o gap de 106px--}}
    <div style="--img:400px;--gap:90px;" class="mt-8 gap-8 max-lg:place-items-center lg:mt-24 grid lg:grid-cols-[var(--img)_1fr] lg:gap-[var(--gap)]">
{{--        <div class="bg-black/40 h-auto lg:w-[var(--img)] lg:h-[680px] relative z-10"></div>--}}
        <img alt="{{ $imagem_alt ?? $titulo }}" class="w-[60vw] h-auto lg:w-full lg:h-[658px] relative z-10 object-cover" src="{{ asset('storage/' . $imagem) }}" >
        <ol>
            @foreach($items as $item)
                <li class="grid grid-cols-[4rem_1fr] lg:grid-cols-[5rem_1fr] items-center py-4 relative last:border-b-0 text-pretty">
                    <div class="font-bold font-headline text-white text-4xl lg:text-5xl text-center">
                        {{ $loop->index + 1 }}
                    </div>
                    <div class="start-conteudo !text-white max-lg:!text-sm max-lg:!leading-relaxed">
                        {!! str($item['texto'])->sanitizeHtml() !!}
                    </div>
                    @if (!$loop->last)
                        <div
                            class="absolute h-[1px] bg-white/30 w-full lg:w-[calc(100%_+_var(--img)_/_2_+_var(--gap))] right-0 bottom-0"></div>
                    @endif
                </li>
            @endforeach
        </ol>
    </div>
</div>
@if(!empty($ctaTexto) || !empty($ctaBotao) && !empty($ctaBotaoUrl))
    <div class="my-10 sm:my-20 px-8">
        @if(!empty($ctaTexto))
            <div class="start-conteudo text-center max-w-[45rem] mx-auto text-pretty">
                {!! str($ctaTexto)->sanitizeHtml() !!}
            </div>
        @endif
        @if(!empty($ctaBotao) && !empty($ctaBotaoUrl))
            <div class="text-center mt-10">
                <x-botao-principal href="{{ $ctaBotaoUrl }}">{{ $ctaBotao }}</x-botao-principal>
            </div>
        @endif
    </div>
@endif