better handling breadcrumb after hero

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
 

layouts/partials/header/hero.html

 {{- $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 -}}