mozaique personnes

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

@@ -192,12 +192,25 @@
 
 }
 
+#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
-    }
+      background-color: #d5d2d1;
+      }
+
 
     .mozaique_personnes h3 {
+
       margin-top: 0px !important;
       padding-top: 3rem;
       padding-left: 15%;
@@ -206,9 +219,15 @@
       font-weight: 800;
       font-size: 1rem;
       line-height: 20px;
+      text-align: left;
     }
 
-
+// .personne {
+//   // display: flex;
+//   // flex-direction: row;
+//   width: 50%;
+//
+// }
 
 
 
@@ -216,17 +235,25 @@
   // background-color: #fff;
   display: flex;
   flex-direction: row;
-  max-width: 65%;
-
-  align-items: stretch;
-  position: relative;
-  margin-right: 10%;
+  width: 50%;
+  // max-width: 35%;
+  padding: 0.5rem;
+  // align-items: stretch;
+  // position: relative;
+  // margin-right: 34%;
   // margin-bottom: 6rem;
-  margin-left: 15%;
-  height: auto;
+  // margin-left: 15%;
+  // height: auto;
+
 
 }
 
+// .personne {
+//   width: 45%;
+//   display: flex;
+//   flex-direction: row;
+// }
+
 // .mozaique :hover {
 //   background-color: #000;
 //   color: #fff;
@@ -237,9 +264,14 @@
       display:flex;
       flex-direction: column;
       font-family: $font-family-default;
-
+      width: 30rem;
+      height: 30rem;
 
     }
+
+// 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;
@@ -264,13 +296,15 @@
     }
 
 .portrait {
-  max-width:15rem !important;
+  // max-width:50% !important;
   background: transparent !important;
 }
 
-.2columns {
-  max-width: 25%;
-}
+// img.portrait {
+//   width: 20%;
+// }
+
+
 
 .bouton {
   border: solid;