Fixed thumbnail sizing

layouts/index.html

@@ -12,9 +12,8 @@
   {{#each collections.posts as |post|}}
     <li data-type="{{ post.type }}" class="grid__col grid__col--1-of-3 grid__col--m-1-of-2 grid__col--s-1-of-1">
       <figure onclick="window.location = '{{ post.path }}'">
-        <div class="preview">
+        <div class="preview" style="background-image: url(../../assets/media/{{ post.preview }})">
           <h3>{{ post.title }}</h3>
-          <img src="../../assets/media/{{ post.preview }}" alt="" />
         </div>
         <figcaption>
           {{ post.description }}

src/app.scss

@@ -211,7 +211,6 @@ video {
     }
 
     img {
-      object-fit: cover;
       border-radius: 0;
       opacity: .2;
       display: block;
@@ -220,6 +219,8 @@ video {
     .preview {
       position: relative;
       display: inline-block;
+      background-size: cover;
+      background-position: center center;
 
       h3 {
         color: white;
@@ -237,6 +238,7 @@ video {
         bottom: 0;
         left: 0;
         background: $dark;
+        opacity: .75;
       }
     }
 
@@ -263,19 +265,13 @@ video {
 }
 
 [data-type=bundle] {
-  @media (min-width: $qry-s) {
-    width: 98.5%;
-  }
-
   figure {
     width: 100%;
 
     .preview {
       float: left;
-    }
-
-    .preview img {
       height: 2.5em;
+      width: 83%;
     }
   }
 
@@ -283,9 +279,19 @@ video {
     float: right;
     padding-top: 0;
   }
+
+  @media (min-width: $qry-s) {
+    width: 98.5%;
+  }
+
+  @media (max-width: $qry-m) {
+    figure .preview {
+      width: 100%;
+    }
+  }
 }
 
-[data-type=article] .preview img {
+[data-type=article] .preview {
   width: 100%;
   height: 9rem;
 }