{% for service in services %}
<div class="col">
    {% if service.service_page_active %}
    <a href="{% if service.service_page_active %}/services/{{ service.slug }}/{% else %}{% url 'services' %}{% endif %}" class="card card-service animate-box animate__animated text-decoration-none" data-animate="animate__fadeIn" style="display:flex;cursor:pointer">
        <div class="icon-circle">
            {% if service.icon %}
            <img src="{{ service.icon.url }}" alt="{{ service.title }}">
            {% elif service.category.icon_class %}
            <i class="{{ service.category.icon_class }}"></i>
            {% elif service.icon_class %}
            <i class="{{ service.icon_class }}"></i>
            {% endif %}
        </div>
        <h3 class="secondary-accent">{{ service.title }}</h3>
        <p>{{ service.description }}</p>
    </a>
    {% else %}
    <div class="card card-service animate-box animate__animated" data-animate="animate__fadeIn" style="display:flex">
        <div class="icon-circle">
            {% if service.icon %}
            <img src="{{ service.icon.url }}" alt="{{ service.title }}">
            {% elif service.category.icon_class %}
            <i class="{{ service.category.icon_class }}"></i>
            {% elif service.icon_class %}
            <i class="{{ service.icon_class }}"></i>
            {% endif %}
        </div>
        <h3 class="secondary-accent">{{ service.title }}</h3>
        <p>{{ service.description }}</p>
    </div>
    {% endif %}
</div>
{% endfor %}
{% if services.has_next %}
<div id="load-more-sentinel" data-next-page="{{ services.next_page_number }}"></div>
{% endif %}