{% load card_badge %}
{% if cards %}
    <div class="mx-4 grid gap-3 grid-cols-[repeat(auto-fit,minmax(150px,1fr))] justify-items-center">
    {% for card in cards %}
      <a href="{% url 'cards:card_detail' card.id %}"
        class="flex justify-between items-center text-primary no-underline">
        {% card_badge card card.offer_count %}
      </a>
    {% endfor %}
  </div>
{% else %}
  <p class="text-center">No cards found</p>
{% endif %}