change color + add main div + flex wrap -> better display

styles/card.css

@@ -16,3 +16,9 @@
   /* height: calc(10rem - 6em);
   width: calc(20rem - 6em); */
 }
+
+#main {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}

views/cards.html

@@ -51,6 +51,7 @@
     </defs>
   </svg>
 
+  <div id="main">
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
@@ -109,8 +110,8 @@
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-      <use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use>
-      <use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use>
+        <use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
+        <use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
@@ -137,6 +138,7 @@
         <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
       </svg>
     </div>
+  </div>
 
 </body>