Remove the need for inline styles for hero images

bakerydemo/static/css/main.css

@@ -280,13 +280,19 @@ figure img {
 
 /* Hero image area */
 .hero {
-  background-size: cover;
-  background-position: center;
   padding: 300px 0 0;
   position: relative;
   margin: 0 0 10px;
 }
 
+.hero-image {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 @media screen and (min-width: 768px) {
   .hero {
     padding: 250px 0 0;

bakerydemo/templates/base/home_page.html

@@ -4,8 +4,8 @@
 {% block content %}
     <div class="homepage">
 
-        {% image page.image fill-1920x600 as image %}
-        <div class="container-fluid hero" style="background-image:url('{{ image.url }}')">
+        <div class="container-fluid hero">
+            {% image page.image fill-1920x600 class="hero-image" alt="" %}
             <div class="hero-gradient-mask"></div>
             <div class="container">
                 <div class="row">

bakerydemo/templates/base/include/header-blog.html

@@ -1,8 +1,9 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
 {% if page.image %}
-    {% image page.image fill-1920x600 as image %}
-    <div class="container-fluid hero hero--blog" style="background-image:url('{{ image.url }}')"></div>
+    <div class="container-fluid hero hero--blog">
+        {% image page.image fill-1920x600 class="hero-image" alt="" %}
+    </div>
 {% endif %}
 <div class="container">
     <div class="row">

bakerydemo/templates/base/include/header-hero.html

@@ -1,8 +1,8 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
 {% if page.image %}
-    {% image page.image fill-1920x600 as image %}
-    <div class="container-fluid hero" style="background-image:url('{{ image.url }}')">
+    <div class="container-fluid hero">
+        {% image page.image fill-1920x600 class="hero-image" alt="" %}
         <div class="hero__container">
             <h1 class="hero__title">{{ page.title }}</h1>
         </div>