:art: tweaking gaps | making img clip larger for big card layout

vue-theme/src/components/card.vue

@@ -90,10 +90,11 @@ export default {
     
 /* for widths larger than 768px */
 @media (min-width: $medium)
-    .card
+    .is-grid .card
         &--info 
             .featured-or-hero-image img
                 max-height: $max-card-img-height
+    .card
         .wide
             padding: 0
             flex-direction: row

vue-theme/src/pages/index.vue

@@ -114,7 +114,6 @@ export default {
                     p.excerpt
                         -webkit-line-clamp: calc($card-line-clamp * 2)
             &.max 
-                margin: 0
                 > ul
                     grid-template-columns: 
                         auto
@@ -157,6 +156,8 @@ export default {
                 &:nth-of-type(5)
                     grid-column-start: 3
         &.max
+            /* Need some extra gap on wide pages */
+            padding: $ms--2 0
             li .featured-or-hero-image img
                 max-height: $max-card-img-height
         &.stickies

vue-theme/src/pages/list.vue

@@ -250,7 +250,7 @@ export default {
     .posts.is-grid
         width: 100%
         display: grid
-        grid-template-columns: auto auto auto
+        grid-template-columns: auto 33.33% auto
         grid-gap: $ms--2
         align-items: start
         /* This is important for how the grid lines up to the page */