Improve card layout

src/assets/css/default.css

@@ -1,3 +1,7 @@
+:root {
+    --lineHeight: 1.4285;
+}
+
 /**
  * Footer
  */
@@ -23,16 +27,37 @@
 /**
  * Card
  */
-.ui.card .header > img {
-	height: 1.25em;
-    vertical-align: text-bottom;
+.ui.fluid.card.stretch {
+    height: 100%;
 }
+
+/** Image */
 .ui.card > .image > img,
 .ui.cards > .card > .image > img {
 	height: 30vh;
     object-fit: cover;
+    background-color: #fff;
 }
 
+/** Content */
+.ui.card > .content > .header + .description,
+.ui.card > .content > .meta + .description,
+.ui.cards > .card > .content > .header + .description,
+.ui.cards > .card > .content > .meta + .description {
+    max-height: calc(2em * var(--lineHeight));
+
+    overflow: hidden;
+}
+
+/** Icon */
+.ui.card .header > img {
+    position: absolute;
+    top: 1em;
+    height: 1.25em;
+    vertical-align: text-bottom;
+}
+
+
 /**
  * Label
  */

src/classes/wishlist.php

@@ -78,12 +78,13 @@ class Wishlist
          * Cards
          */
         if (!empty($products)) { ?>
-            <div class="ui three stackable cards">
+            <div class="ui stackable three column grid container">
                 <?php foreach ($products as $product) {
                     $cache = new EmbedCache();
                     $info  = $cache->get($product['url']);
                     ?>
-                    <div class="card" data-id="<?= $product['id'] ?>">
+                    <div class="column">
+                        <div class="ui fluid card stretch" data-id="<?= $product['id'] ?>">
 
                             <?php if ($info->image) { ?>
                                 <div class="image">
@@ -140,6 +141,7 @@ class Wishlist
                             </div>
 
                         </div>
+                    </div>
                 <?php } ?>
             </div>
         <?php } else { ?>

src/pages/wishlist-view.php

@@ -56,9 +56,9 @@ if (isset($_POST['wishlist_delete_id'])) {
                 </form>
             </div>
         </div>
+    </div>
 
     <div class="wishlist-cards"></div>
-    </div>
 </main>
 
 <?php