finished thematique layout, added mixin for columns media-query

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1097,10 +1097,7 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs {
 
 header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
   margin: 0 auto; }
-  @media only screen and (min-width: 219px) and (max-width: 436px) {
+  @media only screen and (max-width: 436px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
-      width: 218px; } }
-  @media only screen and (min-width: 437px) and (max-width: 654px) {
     header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
       width: 436px; } }
   @media only screen and (min-width: 655px) and (max-width: 872px) {
@@ -1402,8 +1399,20 @@ header[role="banner"] {
         border-radius: 3px;
         background-color: #444;
         color: #fff; }
+  header[role="banner"] #header-bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between; }
+    header[role="banner"] #header-bottom:after {
+      content: none; }
+    header[role="banner"] #header-bottom #block-materiosapisearchblock {
+      align-self: flex-end; }
+    @media (max-width: 654px) {
+      header[role="banner"] #header-bottom {
+        flex-direction: column-reverse; }
+        header[role="banner"] #header-bottom #block-pagetitle {
+          width: max-content; } }
   header[role="banner"] #block-pagetitle {
-    float: left;
     padding: 1em 0; }
     header[role="banner"] #block-pagetitle h2 {
       margin: 0;
@@ -1423,8 +1432,6 @@ header[role="banner"] {
         color: #fff;
         background-color: #69cdcf; }
   header[role="banner"] #block-materiosapisearchblock {
-    float: right;
-    display: inline-block;
     padding: 0; }
     header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form .form-item, header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form input.button {
       display: inline-block; }
@@ -1800,19 +1807,19 @@ article.card {
         cursor: pointer; }
 
 #main-content > article.thematique div.cols {
-  display: grid;
+  display: flex;
-  grid-template-rows: 1fr;
+  flex-direction: row;
-  grid-template-columns: repeat(12, 1fr);
+  flex-wrap: nowrap; }
-  grid-gap: 1em; }
+  @media (max-width: 654px) {
+    #main-content > article.thematique div.cols {
+      flex-wrap: wrap; } }
   #main-content > article.thematique div.cols div.col-left {
-    grid-column: 1; }
+    padding: 0 13px 13px 0;
-  #main-content > article.thematique div.cols div.col-right {
+    flex: 0 0 423px; }
-    grid-column: 2/12; }
 
 #main-content > article.thematique div.col-left section.body {
   background-color: #69cdcf;
-  padding: 0.5em 1em 1em;
+  padding: 0.5em 1em 1em; }
-  width: 423px; }
 
 #main-content > article.thematique aside.linked-materials ul {
   width: calc(100% + 13px); }

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;
+    @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{
-    float: left;
+        width: max-content;
+      }
+      #block-materiosapisearchblock{}
+    }
+
+  }
+  #block-pagetitle{
+    // float: left;
     padding:1em 0;
     h2{
       margin:0;
@@ -339,8 +360,8 @@ header[role="banner"]{
   }
 
   #block-materiosapisearchblock{
-    float:right;
+    // float:right;
-    display:inline-block;
+    // 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;
+    display: flex;
-    grid-template-rows: 1fr;
+    flex-direction: row;
-    grid-template-columns: repeat(12, 1fr);
+    flex-wrap: nowrap;
-    grid-gap: 1em;
+    // @media only screen and (max-width: $small-bp) {
+    @include col-mediaquery-max(3){
+      flex-wrap: wrap;
+    }
+    // }
     div.col-left{
-      grid-column: 1;
+      padding: 0 $column_goutiere $column_goutiere 0;
-    }
+      flex: 0 0 $column_width * 2 + $column_goutiere;
-    div.col-right{
-      grid-column: 2/12;
     }
+    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{