person hero single wip

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

@@ -97,17 +97,3 @@
     //     z-index: 1
     // picture
     //     position: relative
-
-    // /* TODO refacto */
-    // .title-avatar
-    //     @include media-breakpoint-up(md)
-    //         align-items: flex-end
-    //         display: flex
-    //         justify-content: space-between
-    //         margin-bottom: $spacing1
-    //         h1
-    //             margin-bottom: 0
-    //     > div
-    //         width: col(8)
-    //         @include media-breakpoint-up(md)
-    //             width: col(2)

assets/sass/_theme/sections/persons.sass

@@ -102,11 +102,33 @@ ol.persons
     a
         @extend .link-more
 
+/* HERO *///R
+.persons__page
+    .hero
+        @include media-breakpoint-down(md)
+            padding-bottom: 0
+            margin-bottom: $spacing4
+            .avatar
+                width: col(6)
+                margin-top: $spacing1
+                margin-left: auto
+                transform: translateY(100px)
+                margin-top: calc(#{$spacing1} - 100px)
+        @include media-breakpoint-up(md)
+            .content
+                align-items: center
+                display: flex
+                justify-content: space-between
+                margin-top: 0
+                h1
+                    margin-bottom: 0
+                    width: col(8)
+                .avatar
+                    margin-bottom: 0
+                    width: col(3)
+
 @include media-breakpoint-up(lg)
     .persons__page
-        main
-            .container
-                margin-top: $spacing2
         .informations
             @include grid
             margin-bottom: $spacing2

layouts/partials/persons/hero-single.html

 <header class="hero">
   <div class="container">
-    <div class="title-avatar">
+    {{ partial "header/breadcrumbs.html" . }}
+    <div class="content">
       <h1>{{ safeHTML (partial "CorrectPunctuation" .Title) }}</h1>
-      <div>
-        {{ if .Params.image }}
-          <div class="avatar">
-            {{ partial "commons/image.html"
-                  (dict
-                    "image"    .Params.image
-                    "class"    "img-fluid"
-                    "mobile"   "202x202"
-                    "tablet"   "192x192"
-                    "desktop"  "196x196"
-                  )}}
-          </div>
-        {{ end }}
-      </div>
+      {{ if .Params.image }}
+        <div class="avatar">
+          {{ partial "commons/image.html"
+                (dict
+                  "image"    .Params.image
+                  "class"    "img-fluid"
+                  "mobile"   "202x202"
+                  "tablet"   "192x192"
+                  "desktop"  "196x196"
+                )}}
+        </div>
+      {{ end }}
     </div>
-    {{ partial "header/breadcrumbs.html" . }}
   </div>
 </header>