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,6 +40,7 @@
     Receipt</sl-button
   >
 </p>
+<article>
   {% for receipt in receipts -%}
   <sl-card class="receipt-card">
     <img
@@ -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>
+    <div class="date">{{ receipt.date | date(format="%A %_d %B %Y") }}</div>
   </sl-card>
-{% endfor %} {% endblock %} {% block scripts %}
+  {% endfor %}
+</article>
+{% endblock %} {% block scripts %}
 <script src="/static/receipt-list.js"></script>
 <script>
   (() => {