detail css

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

@@ -1,13 +1,16 @@
 header{
   display: none;
 }
+
 // thumbnails global
 .thumbnails{
   width: 100%;
   height: auto;
   background: white;
-  margin: 0.5rem 0;
-  @include shadow;
+  margin: $gutter1;
+  &:not(.bibliographie){
+    @include shadow;
+  }
   figure{
     height: 150px;
     margin: 0;
@@ -21,7 +24,18 @@ header{
   // thumbnails publications
   &.publications{
     .__media{
-      padding: 1rem 0 1rem 1rem;
+      padding: 0.5rem 0 0.5rem 0.5rem;
+      // .__img{
+      //   height: 150px;
+      //   width: 100%;
+      //   img{
+      //     width: auto;
+      //     height: 100%;
+      //   }
+      // }
+    }
+    .__wrap{
+      padding: 0.5rem;
     }
     @media screen and (min-width: 768px) {
       width: calc(100% / 2 - #{$gutter1} * 2);
@@ -39,6 +53,15 @@ header{
 .__slide{
   .thumbnails{
     max-width: 380px;
+    @media screen and (min-width: 768px) {
+      width: calc(100% / 2 - #{$gutter1} * 2);
+    }
+    @media screen and (min-width: 992px) {
+      width: calc(100% / 3 - #{$gutter1} * 2);
+    }
+    @media screen and (min-width: 1200px) {
+      width: calc(100% / 4 - #{$gutter1} * 2);
+    }
   }
 }
 
@@ -59,6 +82,69 @@ header{
     }
   }
 }
+// page moment
+.__ressources{
+  .__publications{
+    .publications{
+      .__media{
+        padding: 0.5rem 0 0.5rem 0.5rem;
+      }
+      .__wrap{
+        padding: 0.5rem;
+      }
+      @media screen and (min-width: 768px) {
+        width: calc(100% / 2 - #{$gutter1});
+      }
+      @media screen and (min-width: 992px) {
+        width: calc(100% / 2 - #{$gutter1});
+      }
+      @media screen and (min-width: 1200px) {
+        width: calc(100% / 2 - #{$gutter1});
+      }
+    }
+  }
+  .__bibliographie{
+    .thumbnails{
+      background: transparent;
+      a{
+        & > div{
+          div, span, p{
+            display: inline;
+            background: white;
+          }
+        }
+      }
+    }
+  }
+}
+// thumbnails participant
+.thumbnails_participants{
+  figure{
+    & > div{
+      width: 100px;
+      height: 100px;
+      margin-left: 0.5rem;
+      img{
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    figcaption{
+      &.__info{
+          padding: 4rem 0.5rem 0.5rem 0.5rem;
+          margin-top: -3rem;
+          background: white;
+          .__name{
+            text-transform: uppercase;
+          }
+      }
+    }
+  }
+}
+
+
 // @media screen and (min-width: 992px) {
 //   .programme{
 //     .row{
@@ -193,36 +279,7 @@ header{
 //     }
 //   }
 //
-// .thumbnails_participants{
-//   figure{
-//     & > div{
-//       width: 100px;
-//       height: 100px;
-//       margin-left: 0.5rem;
-//
-//       img{
-//         border-radius: 50%;
-//         width: 100%;
-//         height: 100%;
-//         object-fit: cover;
-//       }
-//     }
-//     figcaption{
-//       &.__info{
-//           padding: 4rem 0.5rem 0.5rem 0.5rem;
-//           margin-top: -3rem;
-//           background: white;
-//           .__name{
-//             text-transform: uppercase;
-//           }
-//           .__qualite{
-//
-//           }
-//       }
-//     }
-//   }
-// }
-//
+
 // article{
 //   .__publications{
 //     & > div{