Fix mobile display of products on subscription form

static/styles/main.css

@@ -779,13 +779,21 @@ article + article {
 }
 
 .subscription-coffee div {
-    text-align: center;
+    min-width: 12rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
 }
 
 .subscription-coffee img {
     max-height: 300px;
 }
 
+.subscription-coffee input[type=number] {
+    width: 100%;
+}
+
 .subscription-products {
     display: flex;
     gap: 2rem;

storefront/templates/storefront/subscription/form.html

@@ -18,13 +18,11 @@
             <section class="subscription-coffee">
             {% for product in product_list %}
                 <div>
-                    <label><strong>{{ product }}</strong>
-                        <figure class="product__figure">
-                            <img class="product__image" src="{{ product.get_first_img.image.url }}">
-                        </figure>
-                    </label>
-                    <label>Quantity:</label>
-                    <input type="number" min="0" max="20" data-id="{{ product.pk }}" name="product_{{ product.name }}">
+                    <figure class="product__figure">
+                        <img class="product__image" src="{{ product.get_first_img.image.url }}">
+                    </figure>
+                    <strong>{{ product }}</strong>
+                    <input type="number" min="0" max="20" pattern="[0-9]*" data-id="{{ product.pk }}" name="product_{{ product.name }}" placeholder="Quantity">
                 </div>
             {% endfor %}
             </section>