{% for post in posts %}
<div class="col-sm-6 col-lg-4 mb-4">
    <div class="card card-blog animate-box animate__animated animated-fast" data-animate="animate__fadeIn"{% if not post.thumbnail %} style="min-height:320px;border:1px solid var(--accent-color-2)"{% endif %}>
        <a href="{% url 'insight_detail' post.slug %}" class="stretched-link"></a>
        <div class="blog-date">
            <span class="date">{{ post.published_at|date:"d F Y" }}</span>
        </div>
        {% if post.thumbnail %}<img src="{{ post.thumbnail.url }}" alt="{{ post.image_alt|default:post.title }}" class="img-fluid" />{% endif %}
        <div class="card-body">
            <h3 class="blog-title">{{ post.title }}</h3>
            <p>{{ post.excerpt|truncatewords:30 }}</p>
        </div>
    </div>
</div>
{% endfor %}
{% if posts.has_next %}
<div id="load-more-sentinel" data-next-page="{{ posts.next_page_number }}"></div>
{% endif %}