finished conversion to tailwind

theme/templates/home/_card_list.html

@@ -4,21 +4,21 @@
     - cards: a list of card objects
     - mode: a string that determines the render style.
       It should be "offered" for Most Offered Cards and "wanted" for Most Wanted Cards.
-    - Optional 'show_zero' flag (default False): if True, also display cards with 0 offers.
+    - Optional:
+        'show_zero' flag (default False): if True, also display cards with 0 offers.
+        'layout' variable: if set to "auto", use an auto-fit grid based on available horizontal space.
 {% endcomment %}
 {% if cards %}
-  <div class="flex flex-col items-center gap-3">
+    <div class="mx-4 grid gap-3 grid-cols-[repeat(auto-fit,minmax(150px,1fr))] justify-items-center">
     {% for card in cards %}
-      {% if show_zero|default:False or card.offer_count > 0 %}
-        {% if mode == "offered" %}
-        <a href="?offered_cards={{ card.id }}"
-        {% else %}
-        <a href="?wanted_cards={{ card.id }}"
-        {% endif %}
-          class="flex justify-between items-center text-primary no-underline">
-          {% card_badge card card.offer_count %}
-        </a>
+      {% if mode == "offered" %}
+      <a href="?offered_cards={{ card.id }}"
+      {% else %}
+      <a href="?wanted_cards={{ card.id }}"
       {% endif %}
+        class="flex justify-between items-center text-primary no-underline">
+        {% card_badge card card.offer_count %}
+      </a>
     {% endfor %}
   </div>
 {% else %}