improved grid system with media query in home display

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

@@ -1313,10 +1313,21 @@ article.node--type-frontpage .node__content > section.home-showrooms {
   article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
     position: relative;
     display: grid;
-    grid-template-columns: 1fr;
     grid-template-rows: 1fr; }
+    @media only screen and (max-width: 1575px) {
+      article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
+        grid-template-columns: 1fr; }
+        article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item {
+          grid-column: 1; } }
+    @media only screen and (min-width: 1576px) {
+      article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 1em; }
+        article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item:nth-child(odd) {
+          grid-column: 1; }
+        article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item:nth-child(even) {
+          grid-column: 2; } }
     article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item {
-      grid-column: 1;
       grid-row: 1; }
       article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term {
         position: relative;
@@ -1326,7 +1337,8 @@ article.node--type-frontpage .node__content > section.home-showrooms {
           width: 100%;
           padding-bottom: 10em; }
           article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term div.visuel img {
-            max-width: 100%; }
+            max-width: 100%;
+            height: auto; }
         article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text {
           position: absolute;
           bottom: 0;
@@ -1344,7 +1356,14 @@ article.node--type-frontpage .node__content > section.home-showrooms {
 article.node--type-frontpage .node__content > section.home-blabla {
   background-color: #9458aa; }
   article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
-    position: relative; }
+    position: relative;
+    overflow-y: hidden; }
+    @media only screen and (max-width: 1350px) {
+      article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
+        max-height: 630px; } }
+    @media only screen and (min-width: 1351px) {
+      article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
+        max-height: 310px; } }
     article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul {
       width: 100%;
       margin: 0;

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

@@ -346,15 +346,32 @@ article.node--type-frontpage{
           position:relative;
           // height:550px;
           display: grid;
-          grid-template-columns: 1fr;
           grid-template-rows: 1fr;
+          $bp: ($column_width + $column_goutiere )*7;
+
+          @media only screen and (max-width: $bp){
+            grid-template-columns: 1fr;
+            >.field__item{
+              grid-column: 1;
+            }
+          }
+          @media only screen and (min-width: $bp + 1px){
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 1em;
+            >.field__item:nth-child(odd){
+              grid-column: 1;
+            }
+            >.field__item:nth-child(even){
+              grid-column: 2;
+            }
+          }
+
           >.field__item{
+            grid-row: 1;
             // position: absolute;
             // top:0; left:0;
             // width:100%; height:100%;
             // overflow: hidden;
-            grid-column: 1;
-            grid-row: 1;
             .taxonomy-term{
               position: relative;
               width:100%; height:100%;
@@ -363,6 +380,7 @@ article.node--type-frontpage{
                 padding-bottom: 10em;
                 img{
                   max-width: 100%;
+                  height: auto;
                 }
               }
               section.text{
@@ -392,8 +410,16 @@ article.node--type-frontpage{
 
         .cards-list-home{
           position: relative;
-          // max-height: 580px;
-          // overflow-y: hidden;
+          $bp: ($column_width + $column_goutiere );
+          overflow-y: hidden;
+
+          @media only screen and (max-width: $bp * 6){
+            max-height: 630px;
+          }
+          @media only screen and (min-width: ($bp * 6) + 1px){
+            max-height: 310px;
+          }
+
           ul{
             width:100%;
             margin:0; padding:0;