<section class="w-full bg-white achievement-sec">
    <div class="max-w-[1700px] mx-auto sm:px-6 lg:px-0">
        <div class="grid grid-cols-12 sm:gap-8 gap-2 mx-auto  ">
            <div class="col-span-12 text-center mb-5 heading">
                <h2 class="md:text-[48px] text-[30px] 2xl:text-[60px] fo-n font-bold   text-[#000000] leading-tight">OUR LATEST <span class="text-[#0EB972] fo-n">BLOGS</span></h2>
            </div>
            <div class="sm:col-span-4 col-span-12">
                <div class="blog text-center">
                    <!-- Image -->
                    <div class=" overflow-hidden sm:mx-0 mx-auto sm:pb-8 pb-2">
                        <img src="{{ asset('site/Sites/images/blog-img1.png') }}"
                            alt="Tutor"
                            class="xldesk:w-[520px] xldesk:h-[520px] w-[350px] sm:mx-0 mx-auto sm:h-[246px] h-[352px] sm:w-full object-cover
rounded-t-full
sm:rounded-t-none sm:rounded-l-full">
                    </div>
                    <span class="text-[#000000] md:text-[18px] text-sm fm-m">OCT 29, 2025 <span class="border-l-1 ml-2 pl-2 text-[#000000] md:text-[18px] text-sm">EDUCATION</span></span>
                    <h2 class="text-[#000000] desk:text-[24px] lg:text-[20px] sm:text-[15px]  text-[15px]  fo-n lg:leading-8 md:leading-6  leading-5 py-3 font-semibold">How to Become a Tutor Online Sign Up <br> for Online Tutoring Jobs</h2>
                    <a class="underline text-[#000000] lg:text-[24px] text-lg   fo-m" href="{{ url('') }}">Read More</a>
                </div>
            </div>
            <div class="sm:col-span-4 col-span-12">
                <div class="blog text-center">
                    <!-- Image -->
                    <div class=" overflow-hidden mx-auto sm:pb-8 pb-2">
                        <img src="{{ asset('site/Sites/images/blog-img2.png') }}"
                            alt="Tutor"
                            class="xldesk:w-[520px] sm:mx-0 mx-auto xldesk:h-[520px] sm:h-[246px] h-[352px] sm:w-full object-cover ">
                    </div>
                    <span class="text-[#000000] md:text-[18px] text-sm fm-m">OCT 29, 2025 <span class="border-l-1 ml-2 pl-2 text-[#000000] md:text-[18px] text-sm">EDUCATION</span></span>
                    <h2 class="text-[#000000] desk:text-[24px] lg:text-[20px] sm:text-[15px]  text-[15px]  fo-n lg:leading-8 md:leading-6  leading-5 py-3 font-semibold">How to Become a Tutor Online Sign Up <br> for Online Tutoring Jobs</h2>
                    <a class="underline text-[#000000] lg:text-[24px] text-lg    fo-m" href="{{ url('') }}">Read More</a>
                </div>
            </div>
            <div class="sm:col-span-4 col-span-12">
                <div class="blog text-center">
                    <!-- Image -->
                    <div class=" overflow-hidden sm:mx-0 mx-auto sm:pb-8 pb-2">
                        <img src="{{ asset('site/Sites/images/blog-img3.png') }}"
                            alt="Tutor"
                            class="
xldesk:w-[520px] xldesk:h-[520px]
h-[352px] sm:h-[246px] sm:w-full
object-cover
sm:mx-0 mx-auto
w-[350px]
rounded-b-full
sm:rounded-b-none
sm:rounded-tr-full sm:rounded-br-full
">
                    </div>
                    <span class="text-[#000000] md:text-[18px] text-sm fm-m">OCT 29, 2025 <span class="border-l-1 ml-2 pl-2 text-[#000000] md:text-[18px] text-sm">EDUCATION</span></span>
                    <h2 class="text-[#000000] desk:text-[24px] lg:text-[20px] md:text-[15px] text-[15px] lg:leading-8 md:leading-6  leading-5 fo-n font-semibold  py-3">How to Become a Tutor Online Sign Up <br> for Online Tutoring Jobs</h2>
                    <a class="underline text-[#000000] lg:text-[24px] text-lg   fo-m " href="{{ url('') }}">Read More</a>
                </div>
            </div>
        </div>
    </div>
</section>