responsive: blabla ok, pricing first page ok

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

@@ -527,9 +527,12 @@ header[role="banner"]{
 			  display: none;
 	    }
 			padding: 1em 0 0;
-			h2{
-				padding: 0.5em 1em 0!important;
+			body.path-base &{
+				h2{
+					padding: 0.5em 1em 0!important;
+				}
 			}
+
 		}
     h2{
       margin:0;
@@ -1240,7 +1243,9 @@ article.node--type-frontpage{
 					height:auto;
 					box-shadow: none;
 					>section.images{
-						height: auto;
+						#base &{
+							height: auto;
+						}
 						>figure{
 							position: relative;
 							&:not(:first-child){
@@ -1831,18 +1836,34 @@ article.card{
 }
 
 #main-content > article.article{
-  div.cols{
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: repeat(6, 1fr);
-    grid-gap: 1em;
-    div.col-left{
-      grid-column: 1;
-    }
-    div.col-right{
-      grid-column: 2/6;
-    }
-  }
+	// grid only on big screens
+	@include col-mediaquery-min(3){
+	  div.cols{
+	    display: grid;
+	    grid-template-rows: 1fr;
+	    grid-template-columns: repeat(6, 1fr);
+	    grid-gap: 1em;
+	    div.col-left{
+	      grid-column: 1;
+	    }
+	    div.col-right{
+	      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,15 +1932,18 @@ article.card{
   //   }
   // }
   aside.linked-materials{
-    ul{
-      width:calc(100% + #{$column_goutiere});
-      li{
-        display: inline-block;
-        vertical-align: top;
-        width:$column_width;
-        margin:0 $column_goutiere $column_goutiere 0;
-      }
-    }
+
+		@include col-mediaquery-min(3){
+	    ul{
+	      width:calc(100% + #{$column_goutiere});
+	      li{
+	        display: inline-block;
+	        vertical-align: top;
+	        width:$column_width;
+	        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{