Redesign events on the frontpage

_includes/cards/event_card.html

+{%- comment -%}
+
+This is a card displaying event title and date.
+Parameters:
+event: The event which sould be displayed on the card
+
+{%- endcomment -%}
+<div class="card bg-light">
+    <div class="card-body card-overlay">
+        <div class="card-title">
+            <span class="badge badge-secondary">
+                <i class="fas fa-calendar-day" aria-hidden="true"></i>
+                {{ include.event.date | date: "%d.&thinsp;%b.&thinsp;%y" }}
+            </span>
+            <span class="badge badge-secondary">
+                <i class="fas fa-tag" aria-hidden="true"></i>
+                {{ include.event.type | capitalize }}
+            </span>
+        </div>
+        <div class="card-text">
+            <a href="{{ include.event.url | relative_url }}" class="stretched-link">
+                <h4>{{ include.event.title }}</h4>
+            </a>
+        </div>
+    </div>
+</div>

_includes/frontpage/image-card.html

-
 {% if include.image_path %}
 {% assign image_path = site.directory.images | append: include.image_path %}
 {% assign url = include.url %}

_layouts/frontpage.html

@@ -27,8 +27,7 @@
                             {%   else %}
                             {%      assign has_upcoming_events = true %}
                             {%   endif %}
-                            {%   include frontpage/event-card.html
-                                title = event.excerpt %}                         
+                            {%   include cards/event_card.html event = event %}                         
                             {%  assign events_counter = events_counter|plus:1 %}
                             {%  if events_counter >= 3   %}
                             {%     break  %}

_sass/common/_cards.scss

@@ -12,8 +12,9 @@
 .card {
     @include drop-shadow;
 
-    width: 13rem;
+    width: 12rem;
     margin: 0.5rem;
+    height: 9rem;
 
     .badge {
         @include drop-shadow(
@@ -22,6 +23,12 @@
             $color:     rgba(black, 0.25)
         );
     }
+
+    .card-overlay {
+        display:            flex;
+        flex-direction:     column;
+        justify-content:    flex-start;
+    }
 }
 
 .card-body {