Improve layout of cards on frontpage

_includes/frontpage/event-card.html

@@ -44,8 +44,8 @@
         {% if event.excerpt %}
         {% assign card_text = event.excerpt | strip_html %}
         <p class="card-text">
-            {{ card_text | slice: 0, 150 }}
-            {% if card_text.size > 150 %} &mldr; {% endif %}
+            {{ card_text | slice: 0, 40 }}
+            {% if card_text.size > 40 %} &mldr; {% endif %}
         </p>
         {% endif %}
 

_layouts/frontpage.html

@@ -16,7 +16,7 @@
             <div class="info-col">
                 <div class="frontpage-jumbotron">
                         <h1><a href="{{ 'events' | relative_url }}"><i class="far fa-calendar-alt" aria-hidden="true"></i>&nbsp; Events</a></h1>
-                        <div class="flex-content-wrapper">
+                        <div class="flex-cards">
                             {% assign sorted_events = site.events | sort: "start.date" %}
                             {% assign today = "now" | date: "%Y-%m-%d" %}
                             {% assign has_upcoming_events = false %}

_sass/common/_cards.scss

@@ -12,7 +12,7 @@
 .card {
     @include drop-shadow;
 
-    width: 15rem;
+    width: 13rem;
     margin: 0.5rem;
 
     .badge {

assets/css/frontpage.scss

@@ -23,6 +23,32 @@
     }
 }
 
+.frontpage-card {
+    @include drop-shadow;
+
+    width:      13rem;
+    max-width:  13rem;
+    max-height: 9rem;
+
+    margin:     0.5rem;
+    border:     0;
+
+    color: black;
+
+    .card-body {
+        display:    flex;
+        flex-flow:  column nowrap;
+
+        .badge {
+            margin: 0.1rem;
+        }
+
+        a {
+            margin-top: auto;
+        }
+    }
+}
+
 .howto-col {
     display: grid;
     grid-template-columns: 1fr 1fr  1fr  1fr  1fr;