Re-theme slides

web/themes/custom/geofresco/src/global/_components.scss

@@ -37,14 +37,46 @@
 }
 
 /* Hero image in hero block */
-.has-background-image.hero {
+.footer {
-  width: 100vw;
+  .has-background-image.hero.is-medium {
-  position: relative;
+    width: 100vw;
-  left: 50%;
+    position: relative;
-  right: 50%;
+    left: 50%;
-  margin-left: -50vw;
+    right: 50%;
-  margin-right: -50vw;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    .hero-body {
+      padding: 3rem 1.5rem;
+      @include from ($tablet) {
+        padding-top: 9rem;
+        padding-bottom: 7rem;
+      }
+    }
+  }
 }
+.has-background-image.hero.is-medium {
+  img {
+    height: 200px;
+    max-height: 400px;
+    object-fit: cover;
+    position: absolute;
+    @include from($tablet) {
+      height: auto;
+    }
+  }
+  .hero-body {
+    padding: 5.5rem 1rem;
+    @include from ($tablet) {
+      padding-top: 12rem;
+      padding-bottom: 12rem;
+    }
+    .container.is-fluid {
+      margin-left: 32px;
+      margin-right: 32px;
+    }
+  }
+}
+
 
 /* Slim down section vertical padding a bit.*/
 .section {
@@ -94,14 +126,14 @@
 
 @include until($tablet) {
   .comment-section {
-  
+
     article {
       display: block;
       padding-bottom: 0;
     }
-  
+
     .content p:not(:last-child) {
       margin-bottom: 0;
     }
   }
-}
+}

web/themes/custom/geofresco/src/templates/elements/image.html.twig

@@ -12,6 +12,6 @@
  * @ingroup themeable
  */
 #}
-<figure class="image no-upscale">
+<figure class="image">
   <img{{ attributes }} />
 </figure>