@php
use Illuminate\Support\Str;
@endphp
<div class=" font-inter relative w-screen ">
    <livewire:componentes.header.header/>
    <div class=" bg-branco_250">
        <div class=" lg:mt-70 bg-gradient-to-r from-azul_101 to-azul_87 relative  text-center h-52 grid place-items-center">
            <h1 class=" text-branco_242 text-3xl md:text-5xl xl:text-7xl  font-bebas">BLOG VENNX</h1>
        </div>
        <section class="w-10/12  mx-auto py-20 ">

            @foreach ($blog as $artigo)
            <a href="{{ route('blog.detalhes', ['slug' => $artigo->slug, 'ano' => ($artigo->ano), 'mes' => ($artigo->mes), 'dia' => ($artigo->dia)]) }}">
                <article class="mt-8 md:flex md:gap-10 xl:gap-20 place-items-center justify-center  ">
                    <figure class=" ">
                        <img src="{{ Storage::url($artigo->imagem_capa) }}" alt="Imagem" class=" object-cover rounded-xl xl:w-450 xl:h-72">
                    </figure>
                    <div class="flex flex-col justify-center xl:w-560 ">
                        <h3 class=" text-preto_51 font-bold text-lg md:text-xl xl:text-2xl  ">{{$artigo->titulo}}</h3>
                        <p class=" text-cinza_176 font-bold text-xs md:text-sm xl:text-base mt-2">{{$artigo->autor}}</p>
                        <p class=" text-cinza_176 font-bold text-xs md:text-sm xl:text-sm mt-2">{{ $artigo->dia }}/<span>{{ $artigo->mes }}/</span><span>{{ $artigo->ano }} </span></p>
                    </div>
                </article>
            </a>
            @endforeach
            {{ $blog->links() }}
        </section>

        

        
    </div>


    <section class=" ">
        <livewire:componentes.mail.mail/>
    </section>

    <footer class=" bg-branco_242">
        <livewire:componentes.footer.footer-sem-fundo/>
    </footer>

    <style>
        html{
            overflow-x: hidden;
        }
    </style>

</div>