@foreach($blog as $post)
    <div class="col-12 col-sm-6 col-lg-4 d-flex">
        <article class="card card-post-grid-1 bg-transparent border-0 shadow-1 rounded-4 pb-10 overflow-hidden d-flex flex-column w-100" data-animate="fadeInUp">
            <figure class="card-img-top position-relative mb-10" style="height: 300px; overflow: hidden;">
                <a href="/blog/{{$post->id}}" class="hover-shine hover-zoom-in d-block h-100" title="">
                    <img src="/storage/{{$post->image}}" class="img-fluid w-100 h-100 object-fit-cover" alt="{{ ___($post, 'title') }}">
                </a>
            </figure>
            <div class="card-body text-center px-md-9 py-0 d-flex flex-column justify-content-between flex-grow-1">
                <h6 class="card-title lh-base mb-3">
                    <a class="text-decoration-none" href="/blog/{{$post->id}}" title="How to Plop Hair for Bouncy, Beautiful Curls">{{___($post, "title")}}</a>
                </h6>
                <ul class="post-meta list-inline lh-1 d-flex flex-wrap justify-content-center m-0">
                    <li class="list-inline-item">{{$post->created_at->format("M d, Y")}}</li>
                </ul>
            </div>
            <div class="mt-10 text-center">
                <a href="/blog/{{$post->id}}"> <button class="btn btn-outline">{{ __("header.read_more") }}</button></a>
            </div>
        </article>
    </div>
@endforeach