refactored showrooms page

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

@@ -2306,22 +2306,57 @@ article.card{
 #showrooms{
   width: calc(100% + #{$column_goutiere});
   article.showroom{
-    width: $column_width * 2 + $column_goutiere;
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 $column_goutiere $column_goutiere 0;
-
-    h1{
-      margin:0;
-      font-weight: 4;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 1em;
+    section.images{
+      flex:0 0 auto;
     }
-    p{ margin:0; }
-    figure{
-      margin:0;
-      img{
-        max-width: 100%;
+    section.content{
+      flex:0 0 100%;
+      padding: 0 1em;
+    }
+    section.images{
+      position: relative;
+      width: 800px;
+      height: 450px;
+      *{width: 100%; height:100%;}
+      figure{
+        cursor: pointer;
+        margin:0;
+        position: absolute;
+        top:0; left:0;
+        background-color: #fff;
+        // width: 100%; height:100%;
+        &:first-of-type{
+          z-index:5
+        }
+        transition: opacity 0.2s ease-in-out;
+        &.show{opacity: 1; z-index:6;}
+        &.hide{opacity: 0;}
+  
+        img{
+          // width: 100%; height:100%;
+          &.blank{
+            position: absolute;
+            top:0; left:0;
+            z-index: 20;
+          }
+        }
       }
     }
+    section.content{
+
+      h1{
+        margin:0;
+        font-weight: 4;
+      }
+      p{ 
+        margin:0 0 1em 0!important;
+        max-width: 30em;
+      }
+      
+    }
   }
 
 }