{% for card in cards %}
<div class="fan-card" data-index="{{ forloop.counter0 }}">
    <div class="fan-card-corner fan-card-corner--tl">
        <span class="fan-corner-rank">{{ card.corner_rank }}</span>
        {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
    </div>
    <div class="fan-card-face">
        <h3 class="fan-card-name">{{ card.name }}</h3>
        <p class="fan-card-arcana">{{ card.get_arcana_display }}</p>
        {% if card.correspondence %}
        <p class="fan-card-correspondence">{{ card.correspondence }}</p>
        {% endif %}
    </div>
    <div class="fan-card-corner fan-card-corner--br">
        <span class="fan-corner-rank">{{ card.corner_rank }}</span>
        {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
    </div>
</div>
{% endfor %}