diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass
index 5162b4768c1b431718d4b73091edf2c75bf17992..6ca0cf94f5c3cdc7ead0732ea33caea4981eec3b 100644
--- a/assets/sass/_theme/design-system/hero.sass
+++ b/assets/sass/_theme/design-system/hero.sass
@@ -13,7 +13,6 @@
         min-height: $hero-height-desktop
     *:focus-visible
         outline-color: $hero-color
-
     .content
         align-items: start
         padding-top: $spacing3
@@ -35,7 +34,8 @@
         padding-top: 0
     .content + .breadcrumb-nav
         margin-top: $spacing3
-
+    &--no-margin
+        margin-bottom: 0
     @include media-breakpoint-down(desktop)
         .breadcrumb-nav
             margin-left: half(-$grid-gutter-sm)
@@ -84,4 +84,6 @@
                     width: col(8)
                 figure
                     width: col(3)
+    + .breadcrumb-container
+        margin-top: 0
 
diff --git a/layouts/partials/header/hero.html b/layouts/partials/header/hero.html
index 45be3537a1e573cdda176e5593423074eb0519b7..df099f4fa7ce3d9fc466ba83f21493cfafb1e403 100644
--- a/layouts/partials/header/hero.html
+++ b/layouts/partials/header/hero.html
@@ -1,9 +1,10 @@
 {{- $direction := "" -}}
+{{- $breadcrumb_is_after_hero := eq site.Params.breadcrumb.position "after-hero"  -}}
 {{ if .image }}
   {{- $direction = partial "GetImageDirection" .image -}}
 {{ end }}
 
-<header class="hero {{ if .image -}}hero--with-image hero--image-{{- $direction -}}{{- end -}}">
+<header class="hero {{ if .image -}}hero--with-image hero--image-{{- $direction -}}{{- end }} {{ if $breadcrumb_is_after_hero -}} hero--no-margin {{- end }}">
   <div class="container">
     {{- if eq site.Params.breadcrumb.position "hero-start" -}}
       {{- if .breadcrumb | default true -}}
@@ -51,9 +52,9 @@
   </div>
 </header>
 
-{{- if eq site.Params.breadcrumb.position "after-hero" -}}
+{{- if $breadcrumb_is_after_hero -}}
   {{- if .breadcrumb | default true -}}
-    <div class="container">
+    <div class="container breadcrumb-container">
       {{ partial "header/breadcrumbs.html" .context }}
     </div>
   {{- end -}}