h3 equipe chasse contenu d'après

user/themes/epau-antimatter/scss/template/_custom.scss

@@ -150,10 +150,23 @@
     }
 }
 
+@keyframes anim {
+  0% {width: 0%;}
+  100% {width: 100%}
+}
+
 .after-h1 {     // fonctionne mais manque "when in View"
-  transition: width 5s ease-in-out;
+  .test {
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+    animation: anim 5s 500ms 1 normal ease-in-out forwards;
+  }
+
   &:hover {
-    width: 100%;
+    .test {
+        opacity: 1;
+    }
+    // opacity: 1;
     // transition: width 5s ease-in-out;
   }
 }
@@ -332,118 +345,125 @@
 
 }
 
-#mozaique_personnes {
-  display: flex !important;
-  flex-direction: row;
-  flex-wrap: wrap;
-  // margin-left: 15%;
-  // padding-right: 15%;
-  width: 70%;
-  margin: auto;
 
 
-}
+.mozaique_personnes {
+  background-color: #d5d2d1;
 
 
-    .mozaique_personnes {
-      background-color: #d5d2d1;
 
-      h3 {
-        padding-top: 3rem;
-        padding-left: 15%;
-        padding-right: 15%;
-        font-family: "Sarabun";
-        font-weight: 800;
-        font-size: 1rem;
-        line-height: 20px;
-        text-align: left;
-      }
+  .equipe {
+    display: flex !important;
+    flex-direction: row;
+    flex-wrap: wrap;
+    // margin-left: 15%;
+    // padding-right: 15%;
+    width: 65%;
+    margin: auto;
+    // justify-items: center;
 
+    h3 {
+      // display: flex;
+      // flex-grow: 1;
+      padding-top: 3rem;
+      // padding-left: 15%;
+      min-width: 100%;
+      font-family: "Sarabun";
+      font-weight: 800;
+      font-size: 1rem;
+      line-height: 20px;
+      text-align: left;
     }
 
+    .personne {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      // width: 50%;
+
+      padding-right: 0.5rem;
+      padding-bottom: 0.5rem;
+
+      .mozaique {
+        display: flex;
+        flex-direction: row;
 
 
-// .personne {
-//   // display: flex;
-//   // flex-direction: row;
-//   width: 50%;
-//
-// }
+        justify-content: flex-end;
+        max-width: 30rem;
 
+        .portrait {
+          min-width: 10rem;
+          min-height: 10rem;
 
+          // max-width:50% !important;
+          background: red !important;
 
-.mozaique {
-  // background-color: #fff;
-  display: flex;
-  flex-direction: row;
-  width: 50%;
-  // max-width: 35%;
-  padding: 0.5rem;
-  // align-items: stretch;
-  // position: relative;
-  // margin-right: 34%;
-  // margin-bottom: 6rem;
-  // margin-left: 15%;
-  // height: auto;
+          img {
+              max-width: 5rem !important;
+              max-height: 5rem !important;
+          }
 
+        }
+
+        .info {
+          background-color: #fff;
+          display:flex;
+          flex-direction: column;
+          font-family: $font-family-default;
+          width: 50%;
+          height: 30rem;
+          min-width: 15rem;
+
+          h5 {
+           font-weight: 900;
+           font-size: 1.3rem;
+           margin: 0;
+           padding-top: 1rem;
+           padding-right: 1rem;
+           padding-left: 1rem;
+         }
+         h6 {
+           font-weight: 300;
+           font-size: 1.1rem;
+           font-style: italic;
+           margin: 0;
+           padding-right: 1rem;
+           padding-bottom: 1rem;
+           padding-left: 1rem;
+         }
+
+         &:hover {
+             background-color: #000;
+             color: #fff;
+             transition:0.2s ease-in-out;
+         }
+        }
+      }
+    }
+  }
 
 }
 
-// .personne {
-//   width: 45%;
-//   display: flex;
-//   flex-direction: row;
-// }
+
+
+
+
+
+
 
 // .mozaique :hover {
 //   background-color: #000;
 //   color: #fff;
 // }
 
-    .info {
-      background-color: #fff;
-      display:flex;
-      flex-direction: column;
-      font-family: $font-family-default;
-      width: 30rem;
-      height: 30rem;
-
-      h5 {
-       font-weight: 900;
-       font-size: 1.3rem;
-       margin: 0;
-       padding-top: 1rem;
-       padding-left: 1rem;
-     }
-     h6 {
-       font-weight: 300;
-       font-size: 1.1rem;
-       font-style: italic;
-       margin: 0;
-       padding-left: 1rem;
-       padding-bottom: 1rem;
-     }
-    }
 
 // comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...
 
 
-    .info:hover {
-        background-color: #000;
-        color: #fff;
-        transition:0.2s ease-in-out;
-    }
 
 
-.portrait {
-  // max-width:50% !important;
-  background: transparent !important;
 
-  img {
-      width: 5rem !important;
-  }
-
-}