reverse images and text block position on features section

src/components/HomepageFeatures.js

@@ -46,23 +46,22 @@ const FeatureList = [
 
 function Feature({Svg, title, description}) {
   return (
-    <div className={clsx("hero container text--center padding-horiz--md")}>
-      <div className="row">
-        <div className={"col col--5"}>
-          <Svg className={styles.svg} alt={title} />
-        </div>
-        <div className={"col col--5"}>
-          <h3>{title}</h3>
-          <p>{description}</p>
-        </div>
+    <div className="sectionsReverse row">    
+      <div className="col col--5 text--center">
+        <Svg className={styles.svg} alt={title} />
       </div>
+      <div className="col col--5">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>      
     </div>
+    
   );
 }
 
 export default function HomepageFeatures() {
   return (
-    <section className="sections" id="features">      
+    <section className="sections container" id="features">      
       <h2 className={clsx("text--center text--uppercase", styles.title)}>Fonctionnalités</h2>
       <div>
         {FeatureList.map((props, idx) => (

src/components/HomepageFeatures.module.css

@@ -2,5 +2,10 @@
 
 .svg {
   height: 175px;
-  width: 175px;
+  width: 175px;  
+}
+
+.title {
+  font-weight: bold;
+  padding-bottom: 40px;
 }

src/components/HomepagePromises.js

@@ -49,14 +49,12 @@ function Promise({Svg, title, description}) {
 
 export default function HomepagePromises() {
   return (
-    <section className="sections">
-      <div className="container">
-        <div className="row">
-          {PromiseList.map((props, idx) => (
-            <Promise key={idx} {...props} />
-          ))}
-        </div>
-      </div>
+    <section className="section-promises">    
+      <div className="row">
+        {PromiseList.map((props, idx) => (
+          <Promise key={idx} {...props} />
+        ))}
+      </div>   
     </section>
   );
 }

src/css/custom.css

@@ -23,8 +23,8 @@
   --ifm-button-color: var(--ifm-color-primary);
   --ifm-code-font-size: 95%; 
   --ifm-font-family-base: "Comfortaa", cursive;
-  --ifm-font-family: "Montserrat",  sans-serif;
-  --ifm-navbar-shadow: none; 
+  --ifm-font-family: "Montserrat",  sans-serif; 
+  --ifm-container-width: 900px; 
 }
 
 .docusaurus-highlight-code-line {
@@ -84,9 +84,25 @@ header {
 }
 
 /************ main elements style***********/
+.section-promises {
+  padding: 4rem 0;
+  width: 100%;
+}
 .sections {
+  padding: 4rem 0;
+  width: var(--ifm-container-width);
+}
+.sectionsReverse {
+  margin: 0 16px 0 16px;
   padding: 4rem 0;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sectionsReverse:nth-of-type(odd) {
+  flex-direction: row-reverse;
 }
 
 /************ footer style ***********/