Add effects list to cards and a card creator with preview

resources/cards/card.css

@@ -6,15 +6,17 @@
   size: A4;
   margin: 1.2cm;
 }
+@media print {
+    body {
+        width: 21cm;
+        height: 29.7cm;
+    }
+}
 :root {
     font-family: sans-serif;
     font-size: 3mm;
     font-weight: 300;
 }
-body {
-    width: 21cm;
-    height: 29.7cm;
-}
 
 article {
     margin: 3mm 5mm;
@@ -39,7 +41,15 @@ article {
     border-width: 2mm;
     border-color: #333;
     background-color: #333;
-
+}
+article.effects {
+    grid-template-columns: 4fr 3fr;
+    grid-template-areas:
+        "header header"
+        "figure effects"
+        "cost cost"
+        "info info"
+        "power cp";
 }
 
 article >* {
@@ -71,6 +81,12 @@ article figure .material-icons.figure {
     color: #999;
 }
 
+article ul {
+    grid-area: effects;
+    list-style-type: none;
+    padding: 1mm 0;
+}
+
 article main {
     padding: 2mm 0;
     grid-area: info;