{% for card in cards %}
<div class="fan-card"
     data-index="{{ forloop.counter0 }}"
     data-suit-icon="{{ card.suit_icon }}"
     data-corner-rank="{{ card.corner_rank }}"
     data-name-group="{{ card.name_group }}"
     data-name-title="{{ card.name_title }}"
     data-arcana="{{ card.get_arcana_display }}"
     data-correspondence="{{ card.correspondence|default:'' }}"
     data-keywords-upright="{{ card.keywords_upright|join:',' }}"
     data-keywords-reversed="{{ card.keywords_reversed|join:',' }}"
     data-energies="{{ card.energies_json }}"
     data-operations="{{ card.operations_json }}"
     data-levity-qualifier="{{ card.levity_qualifier }}"
     data-gravity-qualifier="{{ card.gravity_qualifier }}"
     data-reversal-qualifier="{{ card.reversal_qualifier }}">
    <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">
        <div class="fan-card-face-upright">
            {% if card.name_group %}<p class="fan-card-name-group">{{ card.name_group }}</p>{% endif %}
            {% if card.arcana != "MAJOR" and card.levity_qualifier %}
                <p class="sig-qualifier-above">{{ card.levity_qualifier }}</p>
            {% endif %}
            <h3 class="fan-card-name">{{ card.name_title }}{% if card.arcana == "MAJOR" and card.levity_qualifier %},{% endif %}</h3>
            {% if card.arcana == "MAJOR" and card.levity_qualifier %}
                <p class="sig-qualifier-below">{{ card.levity_qualifier }}</p>
            {% endif %}
        </div>
        <p class="fan-card-arcana">{{ card.get_arcana_display }}</p>
        <div class="fan-card-face-reversal">
            {% if card.arcana == "MAJOR" %}
                <p class="fan-card-reversal-name">{{ card.levity_qualifier|default:card.gravity_qualifier }}</p>
                <p class="fan-card-reversal-qualifier">{{ card.name_title }}{% if card.levity_qualifier %},{% endif %}</p>
            {% else %}
                <p class="fan-card-reversal-name">{{ card.name_title }}</p>
                <p class="fan-card-reversal-qualifier">{{ card.reversal_qualifier|default:card.gravity_qualifier }}</p>
            {% endif %}
        </div>
    </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 %}