bug fix payment layout

src/api/templates/card.html

@@ -121,6 +121,8 @@
     @media only screen and (max-device-width: 960px){   
         body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 20px;}
         .pane {display:grid; justify-items:center; align-items:center; height:auto;}
+        
+     
         .frame {
             display:block;
             
@@ -128,22 +130,25 @@
             padding:4px;
             
         }
-        .product-info {display:grid; grid-template-columns: 105px auto; gap:4px; 
+        .product-info {display:block;
             align-items:center;
             margin-bottom:2px;
 
         }
         
         .visual{
-            background-color:#f3f3f3;
-            border:1px solid #CAD5E0;
+            
+            
             display:grid;
             align-items: center;
-            justify-items: left;
+            justify-items: center;
+            margin-left:25%;
+            margin-right:25%;
+            width:50%;
 
             
         }
-        
+        .description {display:none}
         .visual img {width:100px}     
         .card input {width:100%;}  
         .pay-frame {margin-top:10px;}
@@ -153,15 +158,16 @@
     }
 
     @media only screen and (min-device-width: 1024px){      
-        body {font-size:16px; font-family:sans-serif; font-weight:lighter; line-height: 28px;}
-        .pane {display:grid; justify-items:center; align-items:center; height:98%;}
+        body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 28px;}
+        .pane {display:grid; justify-items:center; align-items:center; height:96%;}
         .frame {
             width:800px;
             display:grid;
-            grid-template-columns: 40% auto; gap:2px;
+            grid-template-columns: 50% auto; gap:2px;
             
             
         }  
+        .frame .title { grid-column: 1 / span 2; padding:4px;}
         .visual { vertical-align:middle;
             display:grid;
             justify-items: center;
@@ -352,9 +358,10 @@
         },1700)
     })
 </script>
-<div class="pane" style="">
-    <div class="caption" align="center">{{product.name}}</div>
+<div class="pane">
+    
     <div class="frame">
+        <div class="caption title" align="center">{{product.name}}</div>
         <div class="product-info" >