receipt-list: Make cards bigger

On mobile, we don't want 4 cards wide.  Let's make them a static size
and let there be however many fit on a row.

templates/receipt-list.html.tera

@@ -1,8 +1,12 @@
 {% extends "base" %} {% block head %}
 <title>Receipts</title>
 <style>
+  article {
+    text-align: center;
+  }
+
   .receipt-card {
-    max-width: 20%;
+    max-width: 250px;
     margin: 1em;
   }
 
@@ -36,8 +40,9 @@
     Receipt</sl-button
   >
 </p>
-{% for receipt in receipts -%}
-<sl-card class="receipt-card">
+<article>
+  {% for receipt in receipts -%}
+  <sl-card class="receipt-card">
     <img
       slot="image"
       src="/receipts/{{ receipt.id }}/view/{{ receipt.filename }}"
@@ -47,11 +52,11 @@
       <div class="vendor">{{ receipt.vendor }}</div>
       <div class="amount">$ {{ receipt.amount }}</div>
     </a>
-  <div class="date">
-    {{ receipt.date | date(format="%A %_d %B %Y") }}
-  </div>
-</sl-card>
-{% endfor %} {% endblock %} {% block scripts %}
+    <div class="date">{{ receipt.date | date(format="%A %_d %B %Y") }}</div>
+  </sl-card>
+  {% endfor %}
+</article>
+{% endblock %} {% block scripts %}
 <script src="/static/receipt-list.js"></script>
 <script>
   (() => {