{% load wagtailcore_tags %}

<div class="course-grid {% if not page.child_page_listing_heading %}course-grid--margin-top{% endif %}">
    {% for card in cards %}
        <div class="course-grid-item">
            {% if card.sessions or card.cost %}
                <p class="course-grid-item__sessions">
                    {% if card.sessions %}<span>{{ card.sessions }}</span>{% endif %}
                    {% if card.sessions and card.cost %} | {% endif %}
                    {% if card.cost %}{{ card.cost }}{% endif %}
                </p>
            {% endif %}
            <h3 class="course-grid-item__title">{{ card.title }}</h3>
            <div class="course-grid-item__intro">{{ card.intro|richtext }}</div>
            <a href="{% pageurl card %}" class="course-grid-item__link">View details</a>
        </div>
    {% endfor %}
</div>