fix header overflow

assets/css/src/hero.css

@@ -11,10 +11,14 @@
 
 .hero__text {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: auto;
 }
 
 .hero__text h2 {
-  font-size: var(--font-size-xl);
+  font-size: max(4.167vw, 3rem);
   width: 100%;
   margin-bottom: var(--padding-vertical);
 }
@@ -40,9 +44,8 @@
 }
 
 .hero__link {
-  position: absolute;
-  bottom: 0;
   font-weight: bold;
+  margin-top: var(--space-m);
 }
 .hero__link::before {
   display: inline-block;
@@ -80,6 +83,9 @@
   .hero__text h3 {
     text-align: left !important;
   }
+  .hero__text h2 {
+    font-size: var(--font-size-xl);
+  }
   .hero__text h2.big {
     font-size: calc(var(--font-size-xxl) / 1.2);
     text-align: left;

site/templates/home.php

@@ -2,7 +2,9 @@
 <section class="hero">
   <?php if ($site->heroMode() == 'custom'): ?>
     <div class="hero__text">
-      <?= $site->heroText()->toBlocks() ?>
+      <div>
+        <?= $site->heroText()->toBlocks() ?>
+      </div>
       <?php if ($site->heroLinkUrl()->isNotEmpty() == 'true'): ?>
           <a class="hero__link h3" href="<?= $site->heroLinkUrl()->toUrl() ?>"><?php e($site->heroLinkText()->isNotEmpty() == 'true', $site->heroLinkText(), $site->heroLinkUrl()->toUrl()) ?></a>
       <?php endif ?>
@@ -25,10 +27,12 @@
   <?php else: ?>
     <?php $heroEvent = $site->heroEvent()->toPage(); ?>
     <div class="hero__text">
-      <h2>
-        <?= $heroEvent->title() ?>
-      </h2>
-      <?= $heroEvent->chapo() ?>
+      <div>
+        <h2>
+          <?= $heroEvent->title() ?>
+        </h2>
+        <?= $heroEvent->chapo() ?>
+      </div>
       <a class="hero__link h3" href="<?= $heroEvent->url() ?>">Découvrir</a>
     </div>
     <div class="hero__image" style="--color: var(--color-season)">