responsive

web/themes/custom/colloque2024/css/pages/front.scss

@@ -206,17 +206,29 @@ header {
     grid-template-columns: repeat(7, 1fr);
     margin: auto;
     // width: 90%;
+    @media screen and (max-width: 300px) {
+      display: flex;
+      flex-direction: column;
+    }
     div:nth-of-type(1){
       font-size: 8rem;
       font-family: 'Mariannebold';
       line-height: 95%;
       grid-column: 1 / span 4;
       grid-row: 2;
+      @media screen and (max-width: 300px) {
+       font-size: 4.5rem;
+       order: 3;
+      }
     }
     div:nth-of-type(2){
       grid-column: 1 / 4;
       grid-row: 3;
       font-size: 2.5rem;
+      @media screen and (max-width: 300px) {
+        font-size: 1.5rem;
+        order: 4;
+       }
     }
     div:nth-of-type(3){
       text-transform: uppercase;
@@ -224,12 +236,21 @@ header {
       font-size: 3.5rem;
       grid-column: 5 / span 7;
       grid-row: 3;
+      @media screen and (max-width: 300px) {
+        font-size: 1.5rem;
+        order: 2
+        ;
+       }
     }
     div:nth-of-type(4){
       text-transform: uppercase;
       grid-column: 5 / span 7;
       grid-row: 1;
       font-size: 2rem;
+      @media screen and (max-width: 300px) {
+        font-size: 1.5rem;
+        order: 1;
+       }
     }
   }
 }

web/themes/custom/colloque2024/css/pages/layout.scss

@@ -13,6 +13,9 @@ body {
  position: relative;
  top: -1400px;
  padding-top: 5rem;
+ @media screen and (max-width: 300px) {
+  padding-top: 2rem;
+ }
  }
  #background-animated{
   width: 100VW;