responsive: blabla ok, pricing first page ok

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

@@ -19717,7 +19717,7 @@ header[role="banner"] {
         padding: 1em 0 0; }
         body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle {
           display: none; }
-        header[role="banner"] #block-pagetitle h2 {
+        body.path-base header[role="banner"] #block-pagetitle h2 {
           padding: 0.5em 1em 0 !important; } }
     header[role="banner"] #block-pagetitle h2 {
       margin: 0;
@@ -20175,7 +20175,7 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
           width: 100%;
           height: auto;
           box-shadow: none; }
-          .cards-list > ul > li > article > section.images {
+          #base .cards-list > ul > li > article > section.images {
             height: auto; }
           .cards-list > ul > li > article > section.images > figure {
             position: relative; }
@@ -20581,7 +20581,8 @@ article.card {
   font-size: 0.756em;
   font-weight: 400; }
 
-#main-content > article.article div.cols {
+@media (min-width: 655px) {
+  #main-content > article.article div.cols {
     display: grid;
     grid-template-rows: 1fr;
     grid-template-columns: repeat(6, 1fr);
@@ -20589,7 +20590,14 @@ article.card {
     #main-content > article.article div.cols div.col-left {
       grid-column: 1; }
     #main-content > article.article div.cols div.col-right {
-    grid-column: 2/6; }
+      grid-column: 2/6; } }
+
+@media (max-width: 654px) {
+  #main-content > article.article div.cols {
+    padding: 1em;
+    box-sizing: border-box; }
+    #main-content > article.article div.cols .accroche figure {
+      width: 100%; } }
 
 #main-content > article.article section.accroche figure {
   width: 423px;
@@ -20612,13 +20620,24 @@ article.card {
   height: 147.5px;
   background-size: cover; }
 
-#main-content > article.article aside.linked-materials ul {
+@media (max-width: 654px) {
+  #main-content > article.article div.gallery-wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between; }
+    #main-content > article.article div.gallery-wrapper .image {
+      display: block;
+      flex: 0 1 48%;
+      margin: 0 0 7.8px 0; } }
+
+@media (min-width: 655px) {
+  #main-content > article.article aside.linked-materials ul {
     width: calc(100% + 13px); }
     #main-content > article.article aside.linked-materials ul li {
       display: inline-block;
       vertical-align: top;
       width: 205px;
-    margin: 0 13px 13px 0; }
+      margin: 0 13px 13px 0; } }
 
 #main-content > article.article aside.linked-materials h3.field__label {
   font-size: 1em;
@@ -20637,6 +20656,10 @@ article.card {
   font-size: 0.756em;
   font-weight: 400; }
 
+@media (max-width: 654px) {
+  #main-content > article.article nav.prevnext {
+    padding: 0 1em; } }
+
 #main-content > article.article nav.prevnext.bottom {
   margin: 2em 0; }
 
@@ -20652,16 +20675,24 @@ article.card {
   list-style: none; }
   #main-content > article.article nav.prevnext li a {
     font-size: 0.756em;
-    font-weight: 700; }
+    font-weight: 700;
+    line-height: 1.3;
+    display: block;
+    position: relative;
+    padding: 0 1em; }
   #main-content > article.article nav.prevnext li:nth-child(1) {
     grid-column: 1; }
     #main-content > article.article nav.prevnext li:nth-child(1) a:before {
-      content: '< '; }
+      content: '\021A4';
+      position: absolute;
+      left: 0; }
   #main-content > article.article nav.prevnext li:nth-child(2) {
     grid-column: 2;
     text-align: right; }
     #main-content > article.article nav.prevnext li:nth-child(2) a:after {
-      content: ' >'; }
+      content: '\021A6';
+      position: absolute;
+      right: 0; }
 
 #showrooms {
   width: calc(100% + 13px); }
@@ -20794,6 +20825,15 @@ article.card {
       #main-content .view-pricing-products .view-content article.product:nth-child(2) aside .variation button,
       #main-content .view-pricing-products .view-content .views-row:nth-child(2) aside .variation button {
         color: #ff9f50; }
+  @media (max-width: 654px) {
+    #main-content > #pricing,
+    #main-content .view-pricing-products .view-content {
+      flex-flow: column; }
+      #main-content > #pricing article.product,
+      #main-content > #pricing .views-row,
+      #main-content .view-pricing-products .view-content article.product,
+      #main-content .view-pricing-products .view-content .views-row {
+        flex: 0 1 auto; } }
 
 .modal {
   position: relative; }

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

@@ -527,10 +527,13 @@ header[role="banner"]{
 			  display: none;
 	    }
 			padding: 1em 0 0;
+			body.path-base &{
 				h2{
 					padding: 0.5em 1em 0!important;
 				}
 			}
+
+		}
     h2{
       margin:0;
       font-size: 1.512em;
@@ -1240,7 +1243,9 @@ article.node--type-frontpage{
 					height:auto;
 					box-shadow: none;
 					>section.images{
+						#base &{
 							height: auto;
+						}
 						>figure{
 							position: relative;
 							&:not(:first-child){
@@ -1831,6 +1836,8 @@ article.card{
 }
 
 #main-content > article.article{
+	// grid only on big screens
+	@include col-mediaquery-min(3){
 	  div.cols{
 	    display: grid;
 	    grid-template-rows: 1fr;
@@ -1843,6 +1850,20 @@ article.card{
 	      grid-column: 2/6;
 	    }
 	  }
+	}
+
+	@include col-mediaquery-max(3){
+		div.cols{
+			padding:1em;
+			box-sizing: border-box;
+			.accroche{
+				figure{
+					width:100%;
+				}
+			}
+		}
+	}
+
   section.accroche{
     figure{
       width:$column_width*2 + $column_goutiere;
@@ -1870,6 +1891,17 @@ article.card{
       height:$card_height / 2;
       background-size: cover;
     }
+		@include col-mediaquery-max(3){
+			display: flex;
+			flex-flow: row wrap;
+			justify-content: space-between;
+			.image{
+				// width: auto; height: auto;
+				display: block;
+				flex: 0 1 48%;
+				margin: 0 0 $column_goutiere*0.6 0;
+			}
+		}
   }
   // section.videos{
   //   ul{
@@ -1900,6 +1932,8 @@ article.card{
   //   }
   // }
   aside.linked-materials{
+
+		@include col-mediaquery-min(3){
 	    ul{
 	      width:calc(100% + #{$column_goutiere});
 	      li{
@@ -1909,6 +1943,7 @@ article.card{
 	        margin:0 $column_goutiere $column_goutiere 0;
 	      }
 	    }
+		}
     h3.field__label{
       font-size: 1em;
       font-weight: 500;
@@ -1928,6 +1963,10 @@ article.card{
     }
   }
   nav.prevnext{
+
+		@include col-mediaquery-max(3){
+			padding: 0 1em;
+		}
     &.bottom{
       margin:2em 0;
     }
@@ -1944,18 +1983,26 @@ article.card{
       a{
         font-size: 0.756em;
         font-weight: 700;
+				line-height: 1.3;
+				display: block;
+				position: relative;
+				padding: 0 1em;
       }
       &:nth-child(1){
         grid-column: 1;
         a:before{
-          content:'< ';
+          content:'\021A4';
+					position: absolute;
+					left:0;
         }
       }
       &:nth-child(2){
         grid-column: 2;
         text-align: right;
         a:after{
-          content:' >';
+          content:'\021A6';
+					position: absolute;
+					right: 0;
         }
       }
     }
@@ -1998,6 +2045,7 @@ article.card{
 #main-content .view-pricing-products .view-content{
   display: flex;
   flex-flow: row nowrap;
+
   article.product,
   .views-row{
     flex:0 0 50%;
@@ -2059,6 +2107,13 @@ article.card{
       }
     }
   }
+	@include col-mediaquery-max(3){
+		flex-flow: column;
+		article.product,
+		.views-row{
+			flex:0 1 auto;
+		}
+	}
 }
 
 .modal{

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -81,7 +81,7 @@
         </div>
         <aside class="linked-materials">
           <h3 class="field__label">{{$t("materio.Linked Materials")}}</h3>
-          <div class="card-list">
+          <div class="cards-list">
             <ul class="">
               <li v-for="node in article.linked_materials" v-bind:key="node.id">
                 <Card :item="node" />