Fix grid layout on items page

The stagger animation wrapper div was breaking the Bootstrap grid
by wrapping column elements. Now passing stagger_index as a Jinja
variable and applying it directly to the card element.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: ssk42

templates/items_list.html

@@ -200,9 +200,8 @@ <h2 class="h4 mb-0">{{ group.user.name }}</h2>
     </div>
     <div class="row">
         {% for item in group.items %}
-        <div style="--stagger-index: {{ loop.index0 }};">
-            {% include 'partials/_item_card.html' %}
-        </div>
+        {% set stagger_index = loop.index0 %}
+        {% include 'partials/_item_card.html' %}
         {% endfor %}
     </div>
 </section>

templates/partials/_item_card.html

@@ -1,6 +1,6 @@
 {# Partial template for a single item card - used by htmx swaps #}
 <div class="col-md-6 col-lg-4 mb-4">
-    <div class="glass-card p-3 h-100 d-flex flex-column stagger-item" id="item-card-{{ item.id }}">
+    <div class="glass-card p-3 h-100 d-flex flex-column stagger-item" id="item-card-{{ item.id }}" style="--stagger-index: {{ stagger_index|default(0) }};">
         <!-- Image Section -->
         <div class="position-relative mb-3 rounded overflow-hidden" style="height: 200px;">
             <img src="{{ item.image_url or default_image_url }}" class="w-100 h-100 object-fit-cover"