Add columns on pages card view and improve css layout

app/assets/stylesheets/layout.scss

@@ -2869,11 +2869,19 @@ table {
 .figure-card {
   display: flex;
   margin: 0 0 $line-height;
+  overflow: hidden;
   position: relative;
 
+  @include breakpoint(medium down) {
+    min-height: $line-height * 4;
+  }
+
   @include breakpoint(medium) {
     max-height: rem-calc(185);
-    overflow: hidden;
+  }
+
+  @include breakpoint(large) {
+    min-height: rem-calc(185);
   }
 
   a {
@@ -2905,8 +2913,16 @@ table {
 
     h3,
     .title {
-      font-size: rem-calc(24);
-      line-height: rem-calc(24);
+      font-size: $base-font-size;
+
+      @include breakpoint(medium) {
+        font-size: rem-calc(20);
+      }
+
+      @include breakpoint(large) {
+        font-size: rem-calc(24);
+        line-height: rem-calc(24);
+      }
     }
 
     span {

app/views/pages/_card.html.erb

@@ -1,4 +1,5 @@
-<div id="<%= dom_id(card) %>" class="card small-12 medium-6 column margin-bottom end large-4" data-equalizer-watch>
+<div id="<%= dom_id(card) %>"
+     class="card small-12 medium-<%= card.columns %> column margin-bottom end" data-equalizer-watch>
   <%= link_to card.link_url do %>
     <figure class="figure-card">
       <div class="gradient"></div>