@foreach ($articles as $item)
  <div class="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col justify-center items-center max-w-sm mx-auto">
    <div class="bg-gray-300 h-56 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url({{$item->image_location}}"></div>

    <div class=" w-70 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden p-5">
      {{-- <div class="header-content inline-flex ">
        <div class="category-badge flex-1  h-4 w-4 m rounded-full m-1 bg-blue-100">
          <div class="h-2 w-2 rounded-full m-1 bg-purple-500 " ></div>
        </div>
        <div class="category-title text-sm">{{$item->user->name}}</div>
      </div> --}}
      <div class="title-post font-medium font-bold mb-1 pb-1">{{\Illuminate\Support\Str::limit($item->title, $limit = 35, $end='...')}}</div>

      <div class="summary-post text-base text-justify">{{\Illuminate\Support\Str::limit($item->description, $limit = 100, $end='...')}}
        <a href="{{ route('article.show', $item->slug) }}"><button class="bg-blue-100 text-blue-500 mt-4 block rounded p-2 text-sm flex flex-wrap w-full flex-col items-center text-center"><span class="">Donasi</span></button></a>
      </div>
    
    </div>
  </div>
@endforeach