Цикл For не отображается в шаблоне

Я пытаюсь отобразить новости на моем сайте, но почему-то они не отображаются, первый цикл в порядке, но второй не отображает ничего там, где должно быть.

Вот мой код:

HTML:

<div class="container-fluid">
<div class="container">
    <div class="row">
        {% for cat in cats %}
        <div class="col-lg-6 py-3">
            <div class="bg-light py-2 px-4 mb-3">
                <h3 class="m-0">{{cat.category_name}}</h3>
            </div>
            <div class="owl-carousel owl-carousel-3 carousel-item-2 position-relative">
                {% for news in category.news_set.all %}
                {% if forloop.counter == 4 %}
                <div class="position-relative">
                    <img class="img-fluid w-100" src="{{news.cover.url}}" style="object-fit: cover;">
                    <div class="overlay position-relative bg-light">
                        <div class="mb-2" style="font-size: 13px;">
                            <a href="">{{news.title}}</a>
                            <span class="px-1">/</span>
                            <span>{{news.created_at}}</span>
                        </div>
                        <a class="h4 m-0" href="">{{news.description}}</a>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

views.py:

def home (request):   
cats = Category.objects.all()[0:4]
articles = Article.objects.all()    
return render (request,'pages/home.html',
context={
'articles': articles,
'cats': cats,
})

        <div class="owl-carousel owl-carousel-3 carousel-item-2 position-relative">
            {% for news in cat.news_set.all %}
            {% if forloop.counter == 4 %}
            <div class="position-relative">
                <img class="img-fluid w-100" src="{{news.cover.url}}" style="object-fit: cover;">
                <div class="overlay position-relative bg-light">
                    <div class="mb-2" style="font-size: 13px;">
                        <a href="">{{news.title}}</a>
                        <span class="px-1">/</span>
                        <span>{{news.created_at}}</span>
                    </div>
                    <a class="h4 m-0" href="">{{news.description}}</a>
                </div>
            </div>