fix mobile figcaption

assets/sass/_theme/_utils.sass

@@ -368,6 +368,15 @@
         @include media-breakpoint-up(desktop)
             &:before
                 padding-right: 0
+        @include media-breakpoint-down(desktop)
+            position: relative
+            background: $color-background
+            &::before
+                background: transparent
+            p
+                display: block
+                background: transparent
+                position: relative
 
     &:hover
         figcaption p

assets/sass/_theme/design-system/hero.sass

@@ -48,9 +48,10 @@
                 > h1, > hgroup
                     margin-bottom: $spacing2
         &--image-landscape
-            figure
-                margin-left: half(-$grid-gutter-sm)
-                margin-right: half(-$grid-gutter-sm)
+            .content
+                figure
+                    margin-left: half(-$grid-gutter-sm)
+                    margin-right: half(-$grid-gutter-sm)
         &--image-portrait, &--image-square
             .container
                 display: flex

layouts/partials/header/hero.html

@@ -33,7 +33,7 @@
                 "sizes"    ( .sizes | default site.Params.image_sizes.design_system.hero )
                 "lazy"     false
               ) }}
-              {{ if .image.credit }}
+              {{ if partial "GetTextFromHTML" .image.credit }}
                 <figcaption tabindex="0">
                   <p>
                     {{- partial "GetTextFromHTML" .image.credit -}}