finished thematique layout, added mixin for columns media-query

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -23,19 +23,74 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
   padding-top: 24px!important;
 }
 
+
+// define breakpoints media query for each card column number
+// $i: 1;
+// $colw: $column_width;
+// $m: $column_goutiere;
+// $bp: $colw + $m;
+// @while  $bp < 4096px {
+//   $upbp: $bp + $colw + $m;
+//   // @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
+//   //   width:$bp;
+//   // }
+//   breakpoint-#{$i}: ("bp":$bp, "upbp":$upbp);
+//   // @mixin col_breakpoint_#{$i}() {
+//   //   @media (min-width: $bp + 1px) and (max-width: $upbp) {
+//   //     @content;
+//   //   }
+//   // }
+//   $bp: $upbp;
+//   $i: $i + 1;
+// }
+// @mixin col-mediaquery($i) {
+//   @media (min-width: map.get(#{$breakpoint-$i}, "bp") + 1px) and (max-width: map.get(#{$breakpoint-$i}, "upbp")) {
+//     @content;
+//   }
+// }
+
+@mixin col-mediaquery-min-max($i) {
+  $bp: ($column_width + $column_goutiere) * $i + 1px;
+  $upbp: ($column_width + $column_goutiere) * ($i + 1);
+  @media (min-width: $bp) and (max-width: $upbp) {
+    @content;
+  }
+}
+@mixin col-mediaquery-min($i) {
+  $bp: ($column_width + $column_goutiere) * $i;
+  @media (min-width: $bp) {
+    @content;
+  }
+}
+@mixin col-mediaquery-max($i) {
+  $bp: ($column_width + $column_goutiere) * $i;
+  @media (max-width: $bp) {
+    @content;
+  }
+}
+
 // build break points for each multiple of cards row
 // cards will always be centered, using all available space
 %grided-width{
   margin:0 auto;
   $m: $column_goutiere;
   $colw: $column_width;
-  $bp: $colw + $m;
+  $bp: ($colw + $m) * 2;
+  $i: 2;
   @while  $bp < 4096px {
     $upbp: $bp + $colw + $m;
-    @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
-      width:$bp;
+    @if $i == 2 {
+      @media only screen and (max-width: $bp) {
+        width:$bp;
+      }
+    }@else{
+      @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
+        width:$bp;
+      }
     }
+
     $bp: $upbp;
+    $i: $i + 1;
   }
   // outline:1px blue solid;
   // &>*{

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{