@extends('menu')
@section('content')
    <br>
    <br>
    <br>
    <br>
    <br>

    <center>
        <section class="w-full">
            <div class="w-full md:w-1/2">
                <h1 class="text-left ml-8 text-6xl md:text-8xl mb-8 text-[#ECA923]"
                    style="font-family: acumin-pro, sans-serif; font-weight: 700; font-style: normal;">Lo último</h1>
            </div>

            <div
                class="w-full h-auto md:w-[80%] 2xl:w-[70%] flex overflow-x-scroll md:overflow-hidden pl-4 md:ml-52 2xl:ml-[20%] ">
                <button
                    class="bg-white text-[#00468A] font-bold py-4 px-8 text-3xl rounded-[10pt] border border-[#00468A] mr-4 p-8"
                    style="font-family: acumin-pro, sans-serif;font-weight: 200; font-style: normal;">
                    SERSE&nbsp;TIP
                </button>
                <button
                    class="bg-white text-[#00468A] font-bold py-4 px-8 text-3xl rounded-[10pt] border border-[#00468A] mr-4 p-8"
                    style="font-family: acumin-pro, sans-serif;font-weight: 200; font-style: normal;">
                    NOTICIAS
                </button>
                <button
                    class="bg-white text-[#00468A] font-bold py-4 px-8 text-3xl rounded-[10pt] border border-[#00468A] mr-4 p-8"
                    style="font-family: acumin-pro, sans-serif;font-weight: 200; font-style: normal;">
                    TUTORIALES
                </button>
                <button
                    class="bg-white text-[#00468A] font-bold py-4 px-8 text-3xl rounded-[10pt] border border-[#00468A] mr-4 p-8"
                    style="font-family: acumin-pro, sans-serif;font-weight: 200; font-style: normal;">
                    VIDEOS
                </button>
            </div>

            <div class="w-[90%] md:w-[65%] 2xl:w-[60%] flex flex-wrap mt-16 bg-[#0098D8] rounded-[20pt] h-auto">
                <div class="w-full md:w-1/4">
                    <img src="/img/blogs/prmotoria-serse-agente.jpg" alt=""
                        class="rounded-tl-[20pt] rounded-tr-[20pt] md:rounded-tl-[20pt] md:rounded-t-[0pt] md:rounded-l-[20pt] h-full">
                </div>
                <div>
                    <button
                        class="bg-[#ECA923] text-white text-[8pt] mr-[60%] md:mr-[70%] py-2 px-4 mt-8 rounded-[10pt] mb-4">SERSE
                        TIP</button>
                    <h2 class="text-white text-xl md:text-3xl text-left w-[80%]"
                        style="font-family: acumin-pro, sans-serif;font-weight: 700; font-style: normal;">¿Cómo obtener más
                        y mejores prospectos?
                    </h2>
                    <p class="text-left text-[8pt] md:text-sm mt-2 text-white pb-8 w-[80%]"
                        style="font-family: acumin-pro, sans-serif;font-weight: 200; font-style: normal;">Por SERSE
                        | 15 mins de
                        lectura</p>
                </div>
            </div>

            <div class="w-[90%] md:w-[65%] 2xl:w-[60%] flex flex-wrap mt-4 bg-[#0098D8] rounded-[20pt] h-auto">
                <div class="w-full md:w-1/4">
                    <img src="/img/blogs/prmotoria-serse-agente.jpg" alt=""
                        class="rounded-tl-[20pt] rounded-tr-[20pt] md:rounded-tl-[20pt] md:rounded-t-[0pt] md:rounded-l-[20pt] h-full">
                </div>
                <div>
                    <button
                        class="bg-[#ECA923] text-white text-[8pt] mr-[60%] md:mr-[70%] py-2 px-4 mt-8 rounded-[10pt] mb-4">SERSE
                        TIP</button>
                    <h2 class="text-white text-xl md:text-3xl text-left w-[80%]"
                        style="font-family: acumin-pro, sans-serif;font-weight: 700; font-style: normal;">¿Cómo obtener más
                        y mejores prospectos?
                    </h2>
                    <p class="text-left text-[8pt] md:text-sm mt-2 text-white pb-8 w-[80%]"
                        style="font-family: acumin-pro, sans-serif;font-weight: 200; font-style: normal;">Por SERSE
                        | 15 mins de
                        lectura</p>
                </div>
            </div>

            <div class="w-[90%] md:w-[65%] 2xl:w-[60%] flex flex-wrap mt-4 bg-[#0098D8] rounded-[20pt] h-auto">
                <div class="w-full md:w-1/4">
                    <img src="/img/blogs/prmotoria-serse-agente.jpg" alt=""
                        class="rounded-tl-[20pt] rounded-tr-[20pt] md:rounded-tl-[20pt] md:rounded-t-[0pt] md:rounded-l-[20pt] h-full">
                </div>
                <div>
                    <button
                        class="bg-[#ECA923] text-white text-[8pt] mr-[60%] md:mr-[70%] py-2 px-4 mt-8 rounded-[10pt] mb-4">SERSE
                        TIP</button>
                    <h2 class="text-white text-xl md:text-3xl text-left w-[80%]"
                        style="font-family: acumin-pro, sans-serif;font-weight: 700; font-style: normal;">¿Cómo obtener más
                        y mejores prospectos?
                    </h2>
                    <p class="text-left text-[8pt] md:text-sm mt-2 text-white pb-8 w-[80%]"
                        style="font-family: acumin-pro, sans-serif;font-weight: 200; font-style: normal;">Por SERSE
                        | 15 mins de
                        lectura</p>
                </div>
            </div>

            <div class="w-[90%] md:w-[65%] 2xl:w-[60%] flex flex-wrap mt-4 bg-[#0098D8] rounded-[20pt] h-auto">
                <div class="w-full md:w-1/4">
                    <img src="/img/blogs/prmotoria-serse-agente.jpg" alt=""
                        class="rounded-tl-[20pt] rounded-tr-[20pt] md:rounded-tl-[20pt] md:rounded-t-[0pt] md:rounded-l-[20pt] h-full">
                </div>
                <div>
                    <button
                        class="bg-[#ECA923] text-white text-[8pt] mr-[60%] md:mr-[70%] py-2 px-4 mt-8 rounded-[10pt] mb-4">SERSE
                        TIP</button>
                    <h2 class="text-white text-xl md:text-3xl text-left w-[80%]"
                        style="font-family: acumin-pro, sans-serif;font-weight: 700; font-style: normal;">¿Cómo obtener más
                        y mejores prospectos?
                    </h2>
                    <p class="text-left text-[8pt] md:text-sm mt-2 text-white pb-8 w-[80%]"
                        style="font-family: acumin-pro, sans-serif;font-weight: 200; font-style: normal;">Por SERSE
                        | 15 mins de
                        lectura</p>
                </div>
            </div>

            <div class="w-[90%] md:w-[65%] 2xl:w-[60%] flex flex-wrap mt-4 bg-[#0098D8] rounded-[20pt] h-auto">
                <div class="w-full md:w-1/4">
                    <img src="/img/blogs/prmotoria-serse-agente.jpg" alt=""
                        class="rounded-tl-[20pt] rounded-tr-[20pt] md:rounded-tl-[20pt] md:rounded-t-[0pt] md:rounded-l-[20pt] h-full">
                </div>
                <div>
                    <button
                        class="bg-[#ECA923] text-white text-[8pt] mr-[60%] md:mr-[70%] py-2 px-4 mt-8 rounded-[10pt] mb-4">SERSE
                        TIP</button>
                    <h2 class="text-white text-xl md:text-3xl text-left w-[80%]"
                        style="font-family: acumin-pro, sans-serif;font-weight: 700; font-style: normal;">¿Cómo obtener más
                        y mejores prospectos?
                    </h2>
                    <p class="text-left text-[8pt] md:text-sm mt-2 text-white pb-8 w-[80%]"
                        style="font-family: acumin-pro, sans-serif;font-weight: 200; font-style: normal;">Por SERSE
                        | 15 mins de
                        lectura</p>
                </div>
            </div>

        </section>
    </center>

    @include('footer')
@endsection