responsive

web/themes/custom/popsu_colloque/css/components/slides/slides.scss

@@ -1,42 +1,43 @@
-@media screen and (min-width: 576px) {
-  #block-views-block-slide-programme-block-1,
-  #block-views-block-dernieres-publications-block-1{
-    .views{
-      section{
-        .head{
-          display: flex!important;
-          width: 100%;
-          justify-content: space-between;
-          align-items: center;
-        }
-      }
-    }
+.flickity-button {
+  background: transparent;
+  &:hover{
+    background: transparent;
   }
 }
 
+.flickity-button-icon {
+  fill: $col_black;
+}
+
+.flickity-button:disabled {
+  display: none;
+}
+
 #block-views-block-slide-programme-block-1{
-  .date{
-    font-size: 1.5rem;
-    font-family: 'truenoregular';
-    text-transform: uppercase;
-  }
   .__slide{
-    .flickity-viewport{
-      overflow: initial;
-    }
-    a{
-      height: 100%;
-      background: white;
-      @include shadow;
-    }
     article{
+      width: calc(100% - 30px);
       height: 325px;
       background: none;
       display: flex;
-      margin-top: 3rem;
-      margin-bottom: 1.5rem;
-      &.__wrap{
+      margin: 3rem $gutter 1.5rem $gutter;
+      @media screen and (min-width: 768px) {
+        width: calc(100% / 2 - #{$gutter} * 2);
+      }
+      @media screen and (min-width: 992px) {
+        width: calc(100% / 3 - #{$gutter} * 2);
+      }
+      @media screen and (min-width: 1200px) {
+        width: calc(100% / 4 - #{$gutter} * 2);
+      }
+      a{
+        width: 100%;
+        height: 100%;
         background: white;
+        @include shadow;
+        .__wrap{
+          background: white;
+        }
       }
       &.last::after{
         display: inline-block;
@@ -54,7 +55,8 @@
           position: absolute;
           top: -2.5rem;
           width: max-content;
-          font-size: 1.5rem;
+          font-size: 1.2rem;
+          line-height: 1.2;
           font-family: 'truenoregular';
         }
       }
@@ -68,18 +70,27 @@
     margin: 1rem 0;
   }
   .views{
-    section{
+    section.wrap_head{
+      @include croix_or;
       .head{
         display: block;
       }
-      .flickity-slider{
-        // margin-left: 1rem;
+    }
+  }
+  @media screen and (min-width: 576px) {
+    .views{
+      section{
+        .head{
+          display: flex!important;
+          width: 100%;
+          justify-content: space-between;
+          align-items: center;
+        }
       }
     }
   }
 }
 
-
 .paragraph--type--role-de-l-intervenant{
   margin-bottom: 2rem;
   .__slide{
@@ -91,7 +102,7 @@
       }
     }
     .flickity-viewport{
-      overflow: initial;
+      // overflow: initial;
     }
     .flickity-slider > div{
       width: 70%;
@@ -102,18 +113,3 @@
     }
   }
 }
-
-.flickity-button {
-  background: transparent;
-  &:hover{
-    background: transparent;
-  }
-}
-
-.flickity-button-icon {
-  fill: $col_black;
-}
-
-.flickity-button:disabled {
-  display: none;
-}