@isset($blogs)
    <section class="pb-3 bg-gradient-very-light-gray lg-pb-40px md-pb-20px">
        <div class="container">
            <div class="row justify-content-center mb-25px">
                <div class="col-lg-5 text-center"
                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                    <span class="bg-white box-shadow-quadruple-large text-uppercase fs-13 ps-25px pe-25px alt-font fw-600 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-25px">Insights & Inspiration</span>
                    <h4 class="alt-font text-dark-gray fw-700 mb-20px">Explore Our Blog!</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <ul class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large"
                        data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:100, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        <li class="grid-sizer"></li>

                        @foreach ($blogs as $blog)
                            <li class="grid-item">
                                <div class="card bg-transparent border-0 h-100">
                                    <div class="blog-image position-relative overflow-hidden border-radius-4px">
                                        <a href="{{ route('blog.single', $blog->slug) }}">
                                            <img src="{{ $blog->image }}" alt="{{ $blog->title }}" />
                                        </a>
                                    </div>
                                    <div class="card-body px-0 pt-30px pb-30px xs-pb-15px">
                                        <span class="fs-13 text-uppercase d-block mb-5px fw-500">
                                            <a href="{{ route('blog.single', $blog->slug) }}" class="text-dark-gray fw-700 categories-text">{{ $blog->category?->title }}</a>
                                                <a href="{{ route('blog.single', $blog->slug) }}" class="blog-date">{{ getFormatted(date:$blog->date) }}</a>
                                            </span>
                                        <a href="{{ route('blog.single', $blog->slug) }}" class="card-title alt-font fw-600 fs-17 lh-30 text-dark-gray d-inline-block w-95 sm-w-100">{{ $blog->title }}</a>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>
@endisset