mobile version adjestments

assets/main.css

@@ -1,55 +1,86 @@
 .content-wrapper {
-    background-color:#F5F5F5;
-   
+  background-color:#F5F5F5;
+  display: flex;
+gap: 20px;
+align-items: flex-start;
+ 
+ 
 }
 .content-wrapper h1 {
-    text-align: center;
-    color: #6A994E;
-    font-size: 2.5em;
-    margin: 20px 0;
-    text-transform: uppercase;}
-    .content-wrapper h2 {
-        font-size: 1em;
-       
-        }
-.content-wrapper h2 a {
-          text-decoration: none; /* Supprime le soulignement */
-          
-          cursor: default;
-                     
-                  } 
-.content-wrapper h2 span {
-                color: #474405;
-              }   
-.content-wrapper h4 {
-     text-align: center; /* Centre horizontalement le texte dans <h4> */
+  text-align: center;
+  color: #6A994E;
+  font-size: 2.5em;
+  margin: 20px 0;
+  text-transform: uppercase;}
+  .content-wrapper h2 {
+      font-size: 1em;
+     
       }
- .content-wrapper h4 a {
-    text-decoration: none; /* Supprime le soulignement */
-    color: #8B5E3C; 
-    cursor: default;
-       
+.content-wrapper h2 a {
+        text-decoration: none; /* Supprime le soulignement */
+        
+        cursor: default;
+                   
+                } 
+.content-wrapper h2 span {
+              color: #474405;
+            }   
+.content-wrapper h4 {
+   text-align: center; /* Centre horizontalement le texte dans <h4> */
     }
-
-  .content-wrapper h5 {
-    color: #8B5E3C; /* Vert pour souligner les sous-sections */
-    font-size: 1em;
-    margin-top: 20px;
-    margin: 10px 10px;
+.content-wrapper h4 a {
+  text-decoration: none; /* Supprime le soulignement */
+  color: #8B5E3C; 
+  cursor: default;
+     
   }
-.content-wrapper p{
-    font-weight: normal;
-    margin: 10px 10px ;
-    text-align: justify;
-    font-size: 0.98em;
-    color:#8B5E3C;
+
+.content-wrapper h5 {
+  color: #8B5E3C; /* Vert pour souligner les sous-sections */
+  font-size: 1em;
+  margin-top: 20px;
+  margin: 10px 10px;
 }
+.content-wrapper p{
+  font-weight: normal;
+  margin: 10px 10px ;
+  text-align: justify;
+  font-size: 0.98em;
+  color:#8B5E3C;
+}
+/* assets/main.css */
 video {
-  border: 2px solid #474405;
-  border-radius: 8px;
-  max-width: 100%;  /* Responsive width */
-  display: block;   /* Center the video */
-  margin: 20px auto;}
+border: 2px solid #474405;
+border-radius: 8px;
+max-width: 100%;  /* Responsive width */
+display: block;   /* Center the video */
+margin: 20px auto;
+}
+/* assets/main.css */
+
+
+/* Assure l'affichage en deux colonnes sur grand écran */
+.content {
+display: grid;
+grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
+gap: 20px;
+}
+
+/* Sur mobile : affichage en une seule colonne */
+@media (max-width: 768px) {
+.content {
+  grid-template-columns: 1fr; /* Une seule colonne */
+}
+}
+
+
+
+
+
+
+
+
+