align footer at bottom of card

sass/_utils.scss

@@ -23,7 +23,17 @@ figure.image > figcaption {
 }
 
 .author-images>figure {
-  margin-right: -1 * 20%;
-  // border: 1px solid white;
-  // border-radius: 100%;
+  // FIXME: Use percentages, reason not yet fixed: responsiveness broken
+  // margin-right: -1 * 20%;
+  margin-right: -30px;
+}
+.blog-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content:space-between;
+  gap: 0;
+}
+.blog-card>.card-content {
+  height: 100%;
 }

templates/blog/author_media.html

@@ -8,7 +8,7 @@
         {% set image = resize_image(path="authors/" ~ author ~ ".jpg", width=48, height=48) -%}
         <img class="is-rounded" src="{{ image.url }}" alt="Benutzerbild von {{ authors_data[post.authors.0].display_name }}" />
       {% else -%}
-        <span class="fa-stack fa-lg">
+        <span class="fa-stack fa-lg is-block">
           <i class="fa-solid fa-circle fa-stack-2x"></i>
           <i class="fa-solid fa-{{ author | truncate(length=1, end="") | lower() }} fa-stack-1x fa-inverse"></i>
         </span>

templates/blog/card.html

-          <div class="card">
+          <div class="card blog-card">
             <div class="card-image">
               <a href="{{ post.permalink }}">
                 <figure class="image is-4by3">
@@ -11,16 +11,16 @@
               </a>
             </div>
             <div class="card-content">
-              <a href="{{ post.permalink }}"><h3 class="title is-4">{{ post.title }}</h3></a>
-              <div class="content">
-                {% include "blog/meta_line.html" -%}
-                {{ post.summary | safe }}
-              </div>
-              <div class="card-footer">
-                <div class="card-footer-item">
-                  <div class="is-fullwidth">
-                    {% include "blog/author_media.html" -%}
-                  </div>
+                <a href="{{ post.permalink }}"><h3 class="title is-4">{{ post.title }}</h3></a>
+                <div class="content">
+                  {% include "blog/meta_line.html" -%}
+                  {{ post.summary | safe }}
+                </div>
+            </div>
+            <div class="card-footer blog-card-authors">
+              <div class="card-footer-item">
+                <div class="is-fullwidth">
+                  {% include "blog/author_media.html" -%}
                 </div>
               </div>
             </div>