@if (isset($categories) && $categories->count() > 0)
<section class="py-12 wow animate__fadeInRight" data-wow-delay="0.5s">
    <div class="container mx-auto">
        @if (!empty($title))
            <h4 class="section-title">{{ $title }} </h4>
        @endif

        @if (!@empty($content))
            <div class="text-center my-6">
                {!! $content !!}
            </div>
        @endif

        <div class="grid grid-cols-3 gap-4 my-6">
            @foreach($categories as $category)
                <div class="p-4">
                    <h5 class="font-bold text-xl">{{ $category->name }}</h5>
                    <ul class="my-4">
                        @foreach($category->articles->take($articleLimit) as $article)
                            <li class="mb-2 flex space-x-2 items-center text-gray-400 hover:text-blue-400 font-thin wow animate__lightSpeedInRight" data-wow-delay="1s">
                                <span><x-icon-ri-article-line class="w-4 h-4" /></span>
                                <a href="{{ route('articles.show', $article->slug) }}" class="block w-full">{{ $article->title }}</a>
                            </li>
                        @endforeach
                    </ul>
                    <a href="{{ route('categories.show', $category->slug) }}" class="rounded border border-blue-300 px-4 py-2 block text-center mx-auto">Explore All ({{ $category->articles->count() }})</a>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif