alternate

assets/css/hero.css

@@ -120,7 +120,7 @@
 }
 
 .bloc-text h3 {
-  font-size: 1.9rem;
+  font-size: 2.1rem;
   color: #E72E77;
   margin-bottom: 1rem;
 }
@@ -239,4 +239,9 @@
     flex-direction: column;
   }
 
+  /* Revoke alternate layout for image on left or right */
+  .hero-bloc:nth-child(even) {
+    flex-direction: row-reverse;
+  }
+
 }

partials/components/hero.hbs

@@ -47,9 +47,6 @@
         </div>
 
         <div class="hero-bloc">
-            <div class="bloc-image">
-                <img src="assets/screenshots/screenshot_1.png" alt="Optimization Process">
-            </div>
             <div class="bloc-text">
                 <h3>Get the Perfect Trip</h3>
                 <ul>
@@ -58,6 +55,9 @@
                     <li>Enjoy smart optimization for the perfect balance of activities.</li>
                 </ul>
             </div>
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_1.png" alt="Optimization Process">
+            </div>
         </div>
 
         <div class="hero-bloc">
@@ -75,9 +75,6 @@
         </div>
 
         <div class="hero-bloc">
-            <div class="bloc-image">
-                <img src="assets/screenshots/screenshot_2.png" alt="App Mockup">
-            </div>
             <div class="bloc-text">
                 <h3>Real-time Flexibility</h3>
                 <ul>
@@ -85,6 +82,9 @@
                     <li>Adjust your itinerary anytime and keep exploring effortlessly.</li>
                 </ul>
             </div>
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_2.png" alt="App Mockup">
+            </div>
         </div>
 
         <div class="hero-bloc">