Modify hero template to handle large unsplash images (#291)

partials/hero.hbs

@@ -2,30 +2,23 @@
 If the template in question has a background image, then we render responsive image styles
 for it, and apply those styles to the <header> tag.
 --}}
+{{!--
+If the template in question has a background image, then we render responsive image styles
+for it, and apply those styles to the <header> tag.
+--}}
 
 {{#if background}}
-  {{#contentFor "herobackground"}}
-  <style>
-    .m-hero__picture {
-      background-image: url({{img_url background size='xl'}});
-    }
-  
-    @media(max-width: 1000px) {
-      .m-hero__picture {
-        background-image: url({{img_url background size='l'}});
-      }
-    }
-  
-    @media(max-width: 600px) {
-      .m-hero__picture {
-        background-image: url({{img_url background size='m'}});
-      }
-    }
-  </style>
-  {{/contentFor}}
-
   <section class="m-hero with-picture" data-aos="fade">
-    <div class="m-hero__picture {{#is "post"}}in-post{{/is}}"></div>
+    <div class="m-hero__picture {{#is "post"}}in-post{{/is}}">
+      <img srcset="{{img_url background size="s"}} 300w,
+            {{img_url background size="m"}} 600w,
+            {{img_url background size="l"}} 1000w,
+            {{img_url background size="xl"}} 2000w"
+           sizes="(max-width: 600px) 600px, (max-width: 1000px) 1000px, 2000px"
+           src="{{img_url background size="l"}}"
+           alt="{{title}}"
+      />
+    </div>
 {{else}}
   <section class="m-hero no-picture {{#is "post"}}in-post{{/is}}" data-aos="fade">
 {{/if}}

src/sass/components/hero/_hero.scss

@@ -48,7 +48,16 @@
   &.in-post {
     opacity: 1;
   }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
+}
+
 
 .m-hero__content {
   position: relative;