{% load static %}
<ol class="card-results">
    {% for card in cards %}
    <li class="card result">
        <a href="#" aria-label="Lending card for {{ card.cardholder.0 }}">
                {# card image and summary details #}
                <picture>
                    <source srcset="{{ card.thumbnail.0 }}, {{ card.thumbnail2x.0 }} 2x">
                    <img src="{{ card.thumbnail.0 }}" alt="" loading="lazy">
                </picture>

                <dl>
                    <dt class="name">Card Holder</dt>
                    <dd class="name">{{ card.cardholder|join:'; ' }}</dd>

                    <dt class="card-dates">Card Dates</dt>
                    <dd class="card-dates">{% if card.years %}
                        {{ card.start }}{% if card.start != card.end %} – <span class="sr-only">to</span>{{ card.end }}{% endif %}
                        {% endif %}
                    </dd>
                </dl>
        </a>
    </li>
    {% endfor %}
</ol>