<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-[40px] 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>
            @foreach($blogs as $key => $blog)
            @if($key == 0)
            <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($blog->image) }}"
                            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">{{ \Carbon\Carbon::parse($blog->date)->format('M d, Y') }} <span class="border-l-1 ml-2 pl-2 text-[#000000] md:text-[18px] text-sm">{{ $blog->category->category_name }}</span></span>
                    <h2 class="text-[#000000] desk:text-[24px] lg:text-lg sm:text-[15px]  text-[15px]  fo-n lg:leading-8 md:leading-6  leading-5 py-3 font-semibold">{{ $blog->blog_title }}</h2>
                    <a class="underline text-[#000000] lg:text-[24px] text-lg   fo-m" href="{{ route('blogDetail',$blog->id) }}">Read More</a>
                </div>
            </div>
            @elseif($key == 1)
            <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($blog->image) }}"
                            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">{{ \Carbon\Carbon::parse($blog->date)->format('M d, Y') }} <span class="border-l-1 ml-2 pl-2 text-[#000000] md:text-[18px] text-sm">{{ $blog->category->category_name }}</span></span>
                    <h2 class="text-[#000000] desk:text-[24px] lg:text-lg sm:text-[15px]  text-[15px]  fo-n lg:leading-8 md:leading-6  leading-5 py-3 font-semibold">{{ $blog->blog_title }}</h2>
                    <a class="underline text-[#000000] lg:text-[24px] text-lg    fo-m" href="{{ route('blogDetail',$blog->id) }}">Read More</a>
                </div>
            </div>
            @elseif($key == 2)
            <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($blog->image) }}"
                            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">{{ \Carbon\Carbon::parse($blog->date)->format('M d, Y') }} <span class="border-l-1 ml-2 pl-2 text-[#000000] md:text-[18px] text-sm">{{$blog->category->category_name}}</span></span>
                    <h2 class="text-[#000000] desk:text-[24px] lg:text-lg md:text-[15px] text-[15px] lg:leading-8 md:leading-6  leading-5 fo-n font-semibold  py-3">{{ $blog->blog_title }}</h2>
                    <a class="underline text-[#000000] lg:text-[24px] text-lg   fo-m " href="{{ route('blogDetail',$blog->id) }}">Read More</a>
                </div>
            </div>
            @endif
            @endforeach
        </div>
    </div>
</section>