finished thematique layout, added mixin for columns media-query

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -310,8 +310,29 @@ header[role="banner"]{
   }
 
   // header bottom
+  #header-bottom{
+    // disable the default wrapper behaviour
+    &:after{content: none;}
+    // apply flex for normal layout
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    #block-pagetitle{}
+    #block-materiosapisearchblock{
+      align-self: flex-end;
+    }
+    @include col-mediaquery-max(3){
+      flex-direction: column-reverse;
+      // justify-content: flex-start;
+      #block-pagetitle{
+        width: max-content;
+      }
+      #block-materiosapisearchblock{}
+    }
+
+  }
   #block-pagetitle{
-    float: left;
+    // float: left;
     padding:1em 0;
     h2{
       margin:0;
@@ -339,8 +360,8 @@ header[role="banner"]{
   }
 
   #block-materiosapisearchblock{
-    float:right;
-    display:inline-block;
+    // float:right;
+    // display:inline-block;
     // box-shadow: 0 0 5px rgba(0,0,0,0.2);
     padding:0;
 
@@ -920,21 +941,23 @@ article.card{
 //                                    |_|
 #main-content > article.thematique{
   div.cols{
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: repeat(12, 1fr);
-    grid-gap: 1em;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    // @media only screen and (max-width: $small-bp) {
+    @include col-mediaquery-max(3){
+      flex-wrap: wrap;
+    }
+    // }
     div.col-left{
-      grid-column: 1;
-    }
-    div.col-right{
-      grid-column: 2/12;
+      padding: 0 $column_goutiere $column_goutiere 0;
+      flex: 0 0 $column_width * 2 + $column_goutiere;
     }
+    div.col-right{}
   }
   div.col-left section.body{
     background-color: $color-base;
     padding: 0.5em 1em 1em;
-    width:$column_width*2 + $column_goutiere;
   }
   aside.linked-materials{
     ul{