@extends('layouts.frontend.master')
@section('content')
<div class="my-4 relative">
    <div class="container relative z-[9] py-9">
        <div class="grid grid-cols-12 gap-4 py-3 items-center justify-center overflow-hidden">
            @foreach ($blogs as $blog)
            <div class="lg:col-span-3 col-span-12 my-2 text-center">
                <div class="text-center group border block overflow-hidden rounded-[10px] p-2">
                    <div
                        class="bg-[#fcf7f0] w-full h-[200px] flex items-center justify-center rounded-[10px] overflow-hidden">
                        <img loading="lazy" src="{{ $blog->main_image() }}"
                            class="w-full h-full transition duration-500 ease-in-out group-hover:scale-[1.1]" alt="" />
                    </div>
                    <div class="px-2">
                        <h3 class="text-black text-[17px] mt-2 leading-[40px] relative">
                            {{ app()->isLocale('ar') ? $blog->title_ar : $blog->title_en }}
                        </h3>
                        <p class="my-[5px] leading-[25px] text-[12px] text-black line-clamp-3">
                            {!! Str::limit(app()->isLocale('ar') ? $blog->description_ar : $blog->description_en, 50) !!}
                        </p>
                        <a href="{{ route('article.show', $blog) }}"
                            class="bg-main inline-block my-2 px-4 py-2 text-[13px] text-white rounded-[5px]">{{ __('website.seeMore') }}</a>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
        {{$blogs->links('front.components.pagination')}}
    </div>
</div>
@endsection