complete modulation of html

src/modules/hero.html

@@ -1,4 +1,79 @@
-<section class="section hero" id="hero">
+<style>
+  /* specific banners */
+  #top_banner {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+  }
+
+  #hero_section {
+    min-height: 100vh;
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: 1fr auto auto;
+
+    .title {
+      /*
+	    older safari doesn't not support flex gap
+	    I could use a workaround :
+	    	https://stackoverflow.com/questions/65452057/flexbox-gap-workaround-for-safari
+	    but it doesn't work with wrap
+	    so instead I make them in columns and add a margin
+
+	    gap: 10px 30px;
+    */
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      > *:first-child {
+        margin-bottom: 10px;
+      }
+
+      &#name {
+        margin: 30px 0px 20px 0px;
+      }
+
+      &#title {
+        margin: 20px 0px 20px 0px;
+      }
+    }
+
+    .subtitle {
+      text-align: center;
+      display: inline-block;
+      max-width: 700px;
+      margin: 0px auto;
+    }
+  }
+</style>
+
+<!--  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+*                                                                   *
+*   *           *   * * * * * * *   *           *   *               *
+*   *           *         *         * *       * *   *               *
+*   *           *         *         *   *   *   *   *               *
+*   *           *         *         *     *     *   *               *
+*   * * * * * * *         *         *           *   *               *
+*   *           *         *         *           *   *               *
+*   *           *         *         *           *   *               *
+*   *           *         *         *           *   *               *
+*   *           *         *         *           *   * * * * * * *   *
+*                                                                   *
+* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<!--
+	I moved this outside the hero section,
+	so that i can change my mind to put it or not without having to change the grid rows height
+-->
+<div
+  id="top_banner"
+  class="banner banner_size_0 banner_speed_50 banner_reverse grid_full_width"
+  aria-label="banner delimitation in ASCII art"
+></div>
+
+<section class="section hero" id="hero_section">
   <header>
     <!-- prettier-ignore -->
     <h1 aria-label="hugo lamy" id="name" class="title">