centered layout with columns breakpoints

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

@@ -118,6 +118,7 @@ header[role="banner"]{
   }
 
   #block-languageswitcher{
+    text-align: right;
     h2{
       margin: 0.1em 0 0 0;
       font-size: 0.756em;
@@ -132,7 +133,8 @@ header[role="banner"]{
     &>ul.links{
       // background-color: #fff;
       overflow: hidden;
-      width:5em;
+      width:3.5em;
+      // display: inline-block;
       height:1px;
       padding:0.01em 0;
       margin:0;
@@ -152,6 +154,7 @@ header[role="banner"]{
     li{
       list-style: none;
       padding:0;
+      display: inline-block;
       &.is-active{
         display:none;
       }
@@ -206,6 +209,7 @@ aside.messages{
       text-indent: 50px;
       overflow: hidden;
       width:20px; height:20px;
+      margin:0;
       // border-radius: 7px;
       background-image: url('../img/search.png');
       background-position: center;
@@ -238,13 +242,21 @@ article.node--type-frontpage{
       }
     }
 
-    .field--name-computed-materials-reference,
+    // .field--name-computed-materials-reference,
     .field--name-computed-showrooms-reference,
     .field--name-computed-articles-reference{
+      // outline: 1px green solid;
+      margin:0; padding:0;
+      width: calc(100% + #{$column_goutiere});
+
       .field__item{
         display: inline-block;
         vertical-align: top;
-        max-width:250px;
+        width:210px;
+        margin:0 $column_goutiere $column_goutiere 0; padding:0;
+        p{
+          margin:0;
+        }
       }
     }
   }
@@ -266,23 +278,28 @@ article.node--type-frontpage{
 
 
 .cards-list{
+  position: relative;
   .search-info{
     margin:0 0 1em 0;
   }
+
   &>ul{
+    // outline: 1px green solid;
     margin:0; padding:0;
+    width: calc(100% + #{$column_goutiere});
+
     &>li{
       list-style: none;
-      margin:0 1em 1em 0; padding:0;
+      margin:0 $column_goutiere $column_goutiere 0; padding:0;
       display: inline-block;
       vertical-align: top;
     }
   }
 }
 
-.card{
+article.card{
   position: relative;
-  width:210px; height:295px;
+  width:$column_width; height:295px;
   box-shadow: 0 0 5px rgba(0,0,0,0.2);
   // focused
   // box-shadow: 0 0 7px rgba(0,0,0,0.9);