Card: Prevent image streching

Author: rleh

_includes/card.html

@@ -1,9 +1,9 @@
-<section id="card">
+<section>
   <h2>{{include.title}}</h2>
-  <div class="card rounded shadow" style="height: 400px;">
+  <div class="card rounded shadow">
     <img srcset="{{include.image375}} 375w,
                  {{include.image690}} 690w,
-                {{include.image1110}} 1110w" sizes="100vw" class="card-img" style="height: 400px; object-fit:cover; " alt="{{include.imagealt}}">
+                {{include.image1110}} 1110w" sizes="100vw" class="card-img" alt="{{include.imagealt}}">
     <div class="card-img-overlay d-flex flex-column">
       <h1 class="text-white pl-3">{{include.overlayheadline}}</h1>
       <p class="text.white pl-3">{{ include.text }}</p>

_sass/_card.scss

@@ -0,0 +1,7 @@
+.card {
+    height: 400px;
+    img {
+        object-fit: cover;
+        height: 400px;
+    }
+}

css/main.scss

@@ -15,3 +15,4 @@ $fa-font-path: "../font-awesome/fonts";
 @import "button";
 @import "header";
 @import "section";
+@import "card";