:art: hardcore line-clamping

vue-theme/src/components/card.vue

     overflow: hidden
     text-overflow: clip
     &--info
-        justify-content: center
         > a
             line-height: 0
             /* Force crop images */
         font-size: $ms-0
         padding: 0
         line-height: initial
+        display: -webkit-box
+        -webkit-line-clamp: $card-line-clamp
+        -webkit-box-orient: vertical
+        overflow-y: clip
     p
         &.datetime
             font-size: $ms--1
         &.excerpt
             overflow: hidden
             margin: 0
+            -webkit-line-clamp: $card-line-clamp
+            -webkit-box-orient: vertical
+            display: -webkit-box
         &.read-more
             font-size: $ms--1
     
 /* for widths larger than 768px */
 @media (min-width: $medium)
     .card
-        &--info 
-            justify-content: center
         .wide
             display: flex
             padding: 0

vue-theme/src/pages/index.vue

                     margin: 0 0 $ms-0 0
                     .featured-or-hero-image img
                         max-height: $max-card-img-height
+                    p.excerpt
+                        -webkit-line-clamp: calc($card-line-clamp * 2)
             &.max 
                 margin: 0
                 > ul
                 margin: 0
                 min-height: 10em
                 &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)
+                    p.excerpt
+                        -webkit-line-clamp: calc($card-line-clamp * 2)
                     .featured-or-hero-image img
                         max-height: calc($max-card-img-height / 2)
                 /* n1 episode */

vue-theme/src/sss/variables.sss

 $base: 0.95em
 
 $max-card-img-height: 260px
+$card-line-clamp: 3
 
 $ratio: $minor-third
 /* $ratio = 1.2 from _ratios.sss */