:art: fixing up grid layout with actual grid | enforcing card height min

vue-theme/src/components/card.vue

@@ -41,6 +41,7 @@ export default {
 .card
     background-color: white
     padding: $ms--1
+    min-height: 305px
     overflow: hidden
     text-overflow: clip
     &--info 
@@ -52,7 +53,7 @@ export default {
         .featured-or-hero-image img
             object-fit: cover
             object-position: 0% 30%
-            max-height: calc($max-card-img-height / 2)
+            max-height: calc($max-card-img-height / 3)
             overflow-y: clip
     header a
         font-size: $ms--2

vue-theme/src/pages/list.vue

@@ -243,16 +243,16 @@ export default {
     /* posts not grid list */
     .posts
         list-style: none
-        grid-gap: $ms-0
         .post
             width: 100%
     .posts.is-grid
         width: 100%
-        flex-direction: row
-        flex-wrap: wrap
-        justify-content: space-between
+        display: grid
+        grid-template-columns: 32% 32% 32%
+        align-items: start
+        /* This is important for how the grid lines up to the page */
+        justify-content: right 
         .post
-            width: unset
             img
                 max-width: 100%
 

vue-theme/src/sss/variables.sss

@@ -12,7 +12,7 @@ $path: 4px
 /* Proportion */
 $base: 0.95em
 
-$max-card-img-height: 320px
+$max-card-img-height: 420px
 $card-line-clamp: 3
 
 $ratio: $minor-third