better blabla/article display

web/themes/custom/materiotheme/assets/styles/base/_colors.scss

@@ -1,4 +1,5 @@
 $transparent-bg: rgba(255,255,255, 0.95);
+$transparent-bg-blk: rgba(0,0,0, 0.75);
 
 $color-base:#69cdcf;
 $color-showrooms:#50aa3c;

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

@@ -619,6 +619,18 @@ 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;
+    }
+  }
   section.accroche{
     figure{
       width:$column_width*2 + $column_goutiere;
@@ -637,9 +649,20 @@ article.card{
       padding:0 0.5em 0 0;
     }
   }
+  section.videos{
+    ul{
+      margin:0; padding:0;
+      li{
+        margin:0; padding:0;
+        display: inline-block;
+        width:100%; overflow: hidden;
+      }
+    }
+  }
   section.visuels{
     width:calc(100% + #{$column_goutiere});
     figure{
+      position: relative;
       display: inline-block;
       vertical-align: top;
       width:$column_width*2 + $column_goutiere;
@@ -647,6 +670,11 @@ article.card{
       img{
         width:100%;
       }
+      caption{
+        position: absolute; bottom: 0; left:0;
+        box-sizing: border-box; width: 100%; padding:0.5em;
+        background-color: $transparent-bg-blk; color: #fff;
+      }
     }
   }
   aside.linked-materials{