<section class="w-full 2xl:py-16  bg-white">
    <div class="max-w-[1700px] mx-auto sm:px-6 px-0 grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-2">

        @foreach($blogs as $blog)
        <div
            class="group cursor-pointer overflow-hidden
       transition-all
       border-[3px] border-transparent p-4
       hover:border-[#F4C701] blogCardShadow" onclick="window.location.href='{{ route('blogDetail',$blog->id) }}'"
>

            <div class="relative overflow-hidden ">
                <img src="{{asset($blog->image)}}"
                     class="w-full h-[352px] object-cover"
                     alt="">

                <div
                    class="absolute inset-0 bg-[#1CD8C4CF] flex items-center justify-center
                           opacity-0 group-hover:opacity-100 transition duration-500">

                    <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             class="w-8 h-8 text-[#1CD8C4CF]"
                             fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M7 17L17 7M17 7H7M17 7V17" />
                        </svg>
                    </div>
                </div>
            </div>

            <div class="mt-5 px-1">
                <p class="text-lg text-[#5E5E5E] mb-2 fo-n">
                   {{ date('M d, Y', strtotime($blog->date)) }}
|
                    <span class="font-medium text-black">{{$blog->category->category_name}}</span>
                </p>

                <h3 class="xldesk:text-[28px] md:text-[22px] text-lg text-[#143453] fo-m font-medium leading-snug mb-3">
                   {{$blog->blog_title}}
                </h3>

                <p class="text-black text-[16px] fm-n leading-relaxed">
                    {!! $blog->blog_description !!}
                </p>
            </div>

        </div>
        @endforeach

    </div>
</section>
