start responsive boot

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

@@ -1,5 +1,5 @@
 .__img-hero{
-  // height: 400px;
+  height: 400px;
   // width: 100vw;
   // position: relative;
   // left: 50%;

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

@@ -7,38 +7,41 @@
  * @see https://www.drupal.org/project/drupal/issues/2349711
  */
 
- .__slide{
-   .thumbnails{
-     margin: 1rem 0.5rem;
-     max-width: 300px;
-     height: auto;
-     width: calc(100% / 5 );
-     background: white;
-     transform: scale(1);
-     box-shadow: none;
-     transition: 0.3s transform ease, 0.3s box-shadow ease;
-     &:hover{
-       transform: scale(1.05);
-       transition: 0.3s all ease;
-       box-shadow: 0px 0px 13px 0px $color2;
-     }
-      & > .__wrap{
-         padding: 1rem;
-     }
-     .__media{
-       margin-right: 1rem;
-       figcaption{
+ .thumbnails{
+   margin: 1rem 0rem;
+   // max-width: 300px;
+   min-width: 250px;
+   height: auto;
+   width: calc(100% / 4 );
+   background: white;
+   transform: scale(1);
+   box-shadow: none;
+   transition: 0.3s transform ease, 0.3s box-shadow ease;
+   a{
+     display: block;
+     height: 100%;
+   }
+   &:hover{
+     transform: scale(1.05);
+     transition: 0.3s all ease;
+     box-shadow: 0px 0px 13px 0px $color2;
+   }
+    & > .__wrap{
+       padding: 1rem;
+   }
+   .__media{
+     margin-right: 1rem;
+     figcaption{
+       height: 100%;
+       img{
+         width: 100%;
          height: 100%;
-         img{
-           width: 100%;
-           height: 100%;
-           object-fit: cover;
-         }
+         object-fit: cover;
        }
      }
-     .d-flex{
-       padding: 1rem;
-     }
+   }
+   .d-flex{
+     padding: 1rem;
    }
  }