diff --git a/sass/_utils.scss b/sass/_utils.scss
index f6b19c4cf87039ba20ecf4eed87e9a832c6815e2..3162dfa9c06cfe3dcf470d54bd53c8bc1968ce8f 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -1,3 +1,4 @@
+@use "./teckids";
 .image.is-70p {
   width: 70%;
   height: 70%;
@@ -36,6 +37,18 @@ figure.image>figcaption {
   position: relative;
   overflow: hidden;
 
+  .hero-body {
+    .container {
+      max-width: none !important;
+      opacity: 0.6;
+
+      bottom: -20vh;
+      .box {
+        color: black;
+      }
+    }
+  }
+
   img.hero-background {
     position: absolute;
     object-fit: cover;
diff --git a/templates/shortcodes/hero_section.html b/templates/shortcodes/hero_section.html
index 4dc7b453ce8be9ecebda37020e1c15edc5827fc9..e1543fd70b88195d1e57539fcfae963ba2ac6efa 100644
--- a/templates/shortcodes/hero_section.html
+++ b/templates/shortcodes/hero_section.html
@@ -1,12 +1,14 @@
 <section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %}">
   {% if background_img %}
     {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ background_img, width=800, height=600) -%}
-  <img class="hero-background {% if background_transparent %}is-transparent{% endif %}" src="{{ image.url }}" />
+  <img class="hero-background" src="{{ image.url }}" alt="">
   {% endif -%}
-  <div class="hero-body">
+  <div class="hero-body pl-0 pr-0">
     <div class="container has-text-centered">
-      <h1 class="title is-1 mb-5">{{ title | default(value=page.title) | safe }}</h1>
-      {% if body or page.description %}<p class="subtitle">{{ body | default(value=page.description) | safe }}</p>{% endif -%}
+      <div class="box is-radiusless">
+        <h1 class="title is-1 mb-5">{{ title | default(value=page.title) | safe }}</h1>
+        {% if body or page.description %}<p class="subtitle">{{ body | default(value=page.description) | safe }}</p>{% endif -%}
+      </div>
     </div>
   </div>
 </section>