reponsive cards -> item number is unlimited

styles/card.css

@@ -3,8 +3,8 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  height: 10rem;
-  width: 20rem;
+  min-height: 10rem;
+  min-width: 20rem;
   padding: 3em;
   margin: 1.7rem; /* for better display */
   border: 0.3em solid black;

views/cards.html

@@ -133,12 +133,12 @@
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
+        <use href="#star" fill="#FFA500" mask="url(#mask-dot)"></use>
         <use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
+        <use href="#star" fill="#FFA500" mask="url(#mask-grid)"></use>
         <use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
       </svg>
     </div>
@@ -193,10 +193,21 @@
 
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#oval" fill="#800080" mask="url(#mask-grid)"></use>
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
         <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#oval" fill="#800080" mask="url(#mask-dot)"></use>
         <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
       </svg>