From 234cacd964ecd0fd3560c5480db14cede55b376b Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Mon, 28 Nov 2022 15:13:11 +0000
Subject: [PATCH] fix: small design tweaks

---
 index.css     | 59 ++++++++++++++++++++++++++++++++++++---------------
 index.css.map |  2 +-
 index.html    |  4 ++--
 index.scss    | 56 +++++++++++++++++++++++++++++++++---------------
 4 files changed, 84 insertions(+), 37 deletions(-)

diff --git a/index.css b/index.css
index 8ff2a6c..f741031 100644
--- a/index.css
+++ b/index.css
@@ -135,21 +135,32 @@ nav .links .navlink {
 .main-cta {
   margin: auto;
   display: flex;
-  gap: 2rem;
+  gap: 5rem;
   justify-content: center;
   align-items: flex-start;
   flex-wrap: wrap;
-  padding: 5rem 2rem;
+  padding: 5rem 2rem 5rem 8rem;
 }
 @media (max-width: 1200px) {
   .main-cta {
-    padding-top: 7rem;
+    padding-top: 4rem;
     padding-bottom: 2rem;
+    padding-left: 2rem;
+    gap: 1rem;
+  }
+  .main-cta .illu {
+    order: 1;
+  }
+  .main-cta .content-txt {
+    order: 2;
+  }
+  .main-cta .mglLogo {
+    order: 3;
   }
 }
 .main-cta .content-txt {
   margin-top: 5rem;
-  max-width: 600px;
+  max-width: 700px;
 }
 @media (max-width: 1200px) {
   .main-cta .content-txt {
@@ -217,9 +228,9 @@ nav .links .navlink {
   }
 }
 .main-cta .mglLogo {
-  margin-top: 5rem;
   display: flex;
   padding: 1rem;
+  margin-top: 5rem;
 }
 @media (max-width: 1200px) {
   .main-cta .mglLogo {
@@ -234,7 +245,7 @@ nav .links .navlink {
 }
 @media (max-width: 1200px) {
   .explanation {
-    padding: 1rem;
+    padding: 2rem 1rem;
   }
 }
 .explanation .compteurs {
@@ -415,6 +426,12 @@ nav .links .navlink {
 
 .views-app {
   background: #1b1c22;
+  padding-bottom: 2rem;
+}
+@media (max-width: 1200px) {
+  .views-app {
+    padding-bottom: 0;
+  }
 }
 .views-app .content {
   max-width: 945px;
@@ -454,6 +471,7 @@ nav .links .navlink {
     width: 1px;
     background: #f1c017;
     position: absolute;
+    box-shadow: 0px 0px 25px 1px #ffc600;
     top: 0;
     z-index: 1;
   }
@@ -492,12 +510,22 @@ nav .links .navlink {
   line-height: 120%;
   margin-top: 1rem;
 }
+@media (min-width: 1200px) {
+  .views-app .screens-container .screen.consumption {
+    margin-right: -5.5rem;
+  }
+}
 .views-app .screens-container .screen.consumption span {
   color: #d87b39;
 }
 .views-app .screens-container .screen.challenge span {
   color: #61f0f2;
 }
+@media (min-width: 1200px) {
+  .views-app .screens-container .screen.ecogesture {
+    margin-left: -5.5rem;
+  }
+}
 .views-app .screens-container .screen.ecogesture span {
   color: #e3b82a;
 }
@@ -519,10 +547,13 @@ nav .links .navlink {
 
 .create-account {
   background-color: #121212;
-  padding: 2rem 0;
+  padding: 2.5rem 0;
   display: flex;
   text-align: center;
 }
+.create-account h2 {
+  font-size: 2.25rem;
+}
 @media all and (max-width: 1200px) {
   .create-account {
     padding: 2rem 0;
@@ -603,14 +634,13 @@ nav .links .navlink {
   background: #1b1c22;
 }
 .steps .containerSteps {
-  padding: 2rem 1rem;
+  padding: 2rem 1rem 3rem;
   max-width: 1000px;
   margin: auto;
 }
 .steps .containerSteps .step {
   display: flex;
-  justify-content: center;
-  align-items: start;
+  align-items: center;
   gap: 1rem;
   margin: 2.5rem 0;
 }
@@ -622,14 +652,9 @@ nav .links .navlink {
 }
 .steps .containerSteps .step .flex {
   display: flex;
+  align-items: center;
   gap: 1rem;
 }
-@media all and (min-width: 1200px) {
-  .steps .containerSteps .step img {
-    position: relative;
-    top: -60px;
-  }
-}
 .steps .containerSteps .number {
   font-size: 5rem;
   margin-top: -0.5rem;
@@ -651,7 +676,7 @@ nav .links .navlink {
 }
 .steps .containerSteps .header {
   font-weight: 900;
-  font-size: 1.6rem;
+  font-size: 1.5rem;
   margin-bottom: 0.5rem;
 }
 @media all and (max-width: 1200px) {
diff --git a/index.css.map b/index.css.map
index b122a2e..590a6e4 100644
--- a/index.css.map
+++ b/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_globals.scss","_variables.scss","index.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAKF;AAAA;EAEE;EACA,YChBM;;;AD6DR;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,OC7EM;ED8EN;EACA;;;AAEF;EACE;EACA;EACA,OCpFM;EDqFN;EACA;;;AAEF;EACE;EACA,OC1FM;ED2FN;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA,OC5GM;;;AD+GR;EACE,OClHO;;;ADqHT;EACE;AAAA;IAEE;;;AErHJ;EFmBE;EEjBA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;;AFOA;EEpBF;IFqBI;;;AEPF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;IACE;;EAEF;IACE;;;;AAKN;EACE;;AACA;EAFF;IAGI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EARF;IASI;IACA;;;AAEF;EACE;EACA;;AACA;EAHF;IAII;;;AAEF;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;EF5CJ;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EE0BI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFjDJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;AEkCE;EAhBF;IAiBI;;;AAEF;EACE;;AAKJ;EADF;IAEI;;;AAIJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE,YDpHS;ECqHT;EACA;;AACA;EAJF;IAKI;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAVF;IAWI;;EACA;IACE;IACA;;EAEF;IACE;;;AAIJ;EACE,OD5IC;EC6ID;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAIN;EACE,OD3LO;EC4LP;;AAEF;EACE,OD9LM;EC+LN;;AAEF;EACE,ODjMQ;ECkMR;;AAGJ;EACE;;AAEE;EADF;IAEI;;;;AAMR;EACE;EAMA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDxOU;ECyOV;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAGJ;EACE,ODjQI;ECkQJ;EACA;EACA;;AACA;EACE;;AAGJ;EACE,OD1QI;;AC4QN;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AACA;EAHF;IAII;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;IACA;;;AAEF;EACE;;;AAIN;EACE,YD3SS;;AC4ST;EACE;EACA;EACA;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;IACA;;EACA;IACE;IACA;IACA;;EACA;IAEE;IACA;IACA;IACA;IACA,YD9UD;IC+UC;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;IACA;;EAEF;IACE;;;AAIF;EAEE;;AACA;EAHF;IAII;;;AAIF;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AAGA;EACE,ODpXG;;ACwXL;EACE,OD/WG;;ACmXL;EACE,OD/XI;;ACoYZ;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAEF;EACE;EACA;;;AAIN;EACE,kBDrZM;ECsZN;EACA;EACA;;AAEA;EANF;IAOI;;EACA;IACE;;EAEA;AAAA;IAEE;;EAGJ;IACE;IACA;IACA;IACA;;;AAIJ;EACE;;AAEF;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE,WFnbY;EEobZ;EACA;EACA;EACA;;AACA;EFlaF;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEgZI;EACA;EACA;EACA;EACA;;AFpaJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;;AEwZJ;EACE,YDldS;;ACmdT;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;;;AAEF;EACE;EACA;;AAGA;EADF;IAEI;IACA;;;AAIN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAGJ;EACE;EACA;;AAGA;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AAEF;EACE,ODxgBM;;AC0gBR;EACE,OD1gBQ;;AC4gBV;EACE,OD/gBO;;ACihBT;EACE,ODpgBG;;ACugBL;EFvfF;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEqeI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF5fJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;;AEgfJ;EACE;EACA,YD5iBM;EC6iBN;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA,YDjjBQ;ECkjBR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAKN;EACE,kBDllBM;ECmlBN;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE,ODlmBK;ECmmBL;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EAjCF;IAkCI;IACA;;EAEA;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["_globals.scss","_variables.scss","index.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAKF;AAAA;EAEE;EACA,YChBM;;;AD6DR;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,OC7EM;ED8EN;EACA;;;AAEF;EACE;EACA;EACA,OCpFM;EDqFN;EACA;;;AAEF;EACE;EACA,OC1FM;ED2FN;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA,OC5GM;;;AD+GR;EACE,OClHO;;;ADqHT;EACE;AAAA;IAEE;;;AErHJ;EFmBE;EEjBA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;;AFOA;EEpBF;IFqBI;;;AEPF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;IACE;;EAEF;IACE;;;;AAKN;EACE;;AACA;EAFF;IAGI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EARF;IASI;IACA;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAEF;IACE;;;AAGJ;EACE;EACA;;AACA;EAHF;IAII;;;AAEF;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;EFxDJ;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEsCI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF7DJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;AE8CE;EAhBF;IAiBI;;;AAEF;EACE;;AAKJ;EADF;IAEI;;;AAIJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE,YDhIS;ECiIT;EACA;;AACA;EAJF;IAKI;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAVF;IAWI;;EACA;IACE;IACA;;EAEF;IACE;;;AAIJ;EACE,ODxJC;ECyJD;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAIN;EACE,ODvMO;ECwMP;;AAEF;EACE,OD1MM;EC2MN;;AAEF;EACE,OD7MQ;EC8MR;;AAGJ;EACE;;AAEE;EADF;IAEI;;;;AAMR;EACE;EAMA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDpPU;ECqPV;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAGJ;EACE,OD7QI;EC8QJ;EACA;EACA;;AACA;EACE;;AAGJ;EACE,ODtRI;;ACwRN;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AACA;EAHF;IAII;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;IACA;;;AAEF;EACE;;;AAIN;EACE,YDvTS;ECwTT;;AACA;EAHF;IAII;;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;IACA;;EACA;IACE;IACA;IACA;;EACA;IAEE;IACA;IACA;IACA;IACA,YD9VD;IC+VC;IACA;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;IACA;;EAEF;IACE;;;AAIF;EAEE;;AACA;EAHF;IAII;;;AAIF;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AAGA;EADF;IAEI;;;AAEF;EACE,ODxYG;;AC4YL;EACE,ODnYG;;ACuYL;EADF;IAEI;;;AAEF;EACE,ODtZI;;AC2ZZ;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAEF;EACE;EACA;;;AAIN;EACE,kBD5aM;EC6aN;EACA;EACA;;AAEA;EACE;;AAGF;EAVF;IAWI;;EACA;IACE;;EAEA;AAAA;IAEE;;EAGJ;IACE;IACA;IACA;IACA;;;AAIJ;EACE;;AAEF;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAGF;EACE,WF/cY;EEgdZ;EACA;EACA;EACA;;AACA;EF9bF;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EE4aI;EACA;EACA;EACA;EACA;;AFhcJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;;AEobJ;EACE,YD9eS;;AC+eT;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;IACA;;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAGJ;EACE;EACA;;AAGA;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AAEF;EACE,OD9hBM;;ACgiBR;EACE,ODhiBQ;;ACkiBV;EACE,ODriBO;;ACuiBT;EACE,OD1hBG;;AC6hBL;EF7gBF;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EE2fI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFlhBJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;;AEsgBJ;EACE;EACA,YDlkBM;ECmkBN;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA,YDvkBQ;ECwkBR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAKN;EACE,kBDxmBM;ECymBN;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE,ODxnBK;ECynBL;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EAjCF;IAkCI;IACA;;EAEA;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE","file":"index.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index 367d553..52c0d5b 100644
--- a/index.html
+++ b/index.html
@@ -225,7 +225,7 @@
           <div class="flex">
             <div class="number water-color">1</div>
             <div class="text">
-              <p class="header">Créer votre Cloud Personnel</p>
+              <h3 class="header">Créer votre Cloud Personnel</h3>
               <p class="content">
                 Afin de préserver la confidentialité et la sécurité de vos
                 données de consommation, vous devez créer un espace personnel
@@ -243,7 +243,7 @@
           <div class="flex">
             <div class="number elec-color">2</div>
             <div class="text">
-              <p class="header">Connecter vos compteurs à Ecolyo</p>
+              <h3 class="header">Connecter vos compteurs à Ecolyo</h3>
               <p class="content">
                 Muni d'une facture, et après avoir donné votre accord, vous
                 pouvez connecter vos compteurs à Ecolyo. Plus besoin ensuite d'y
diff --git a/index.scss b/index.scss
index a9cecb6..ac919bb 100644
--- a/index.scss
+++ b/index.scss
@@ -51,18 +51,30 @@ nav {
 .main-cta {
   margin: auto;
   display: flex;
-  gap: 2rem;
+  gap: 5rem;
   justify-content: center;
   align-items: flex-start;
   flex-wrap: wrap;
-  padding: 5rem 2rem;
+  padding: 5rem 2rem 5rem 8rem;
   @media (max-width: $breakpoint) {
-    padding-top: 7rem;
+    padding-top: 4rem;
     padding-bottom: 2rem;
+    padding-left: 2rem;
+    gap: 1rem;
+
+    .illu {
+      order: 1;
+    }
+    .content-txt {
+      order: 2;
+    }
+    .mglLogo {
+      order: 3;
+    }
   }
   .content-txt {
     margin-top: 5rem;
-    max-width: 600px;
+    max-width: 700px;
     @media (max-width: $breakpoint) {
       margin-top: 0rem;
     }
@@ -107,9 +119,9 @@ nav {
   }
 
   .mglLogo {
-    margin-top: 5rem;
     display: flex;
     padding: 1rem;
+    margin-top: 5rem;
     @media (max-width: $breakpoint) {
       margin-top: 0;
     }
@@ -121,7 +133,7 @@ nav {
   text-align: center;
   padding-top: 5rem;
   @media (max-width: $breakpoint) {
-    padding: 1rem;
+    padding: 2rem 1rem;
   }
 
   .compteurs {
@@ -301,6 +313,10 @@ nav {
 }
 .views-app {
   background: $bg-light;
+  padding-bottom: 2rem;
+  @media (max-width: $breakpoint) {
+    padding-bottom: 0;
+  }
   .content {
     max-width: 945px;
     width: 100%;
@@ -334,6 +350,7 @@ nav {
           width: 1px;
           background: $yellow;
           position: absolute;
+          box-shadow: 0px 0px 25px 1px #ffc600;
           top: 0;
           z-index: 1;
         }
@@ -374,6 +391,9 @@ nav {
         margin-top: 1rem;
       }
       &.consumption {
+        @media (min-width: $breakpoint) {
+          margin-right: -5.5rem;
+        }
         span {
           color: $elec-color;
         }
@@ -384,6 +404,9 @@ nav {
         }
       }
       &.ecogesture {
+        @media (min-width: $breakpoint) {
+          margin-left: -5.5rem;
+        }
         span {
           color: $fluid-color;
         }
@@ -406,10 +429,14 @@ nav {
 }
 .create-account {
   background-color: $black;
-  padding: 2rem 0;
+  padding: 2.5rem 0;
   display: flex;
   text-align: center;
 
+  h2 {
+    font-size: 2.25rem;
+  }
+
   @media all and (max-width: $breakpoint) {
     padding: 2rem 0;
     .container {
@@ -445,6 +472,7 @@ nav {
   .warning2 {
     background-position: bottom;
   }
+
   .container {
     max-width: $content-width;
     margin: auto;
@@ -469,13 +497,12 @@ nav {
 .steps {
   background: $bg-light;
   .containerSteps {
-    padding: 2rem 1rem;
+    padding: 2rem 1rem 3rem;
     max-width: 1000px;
     margin: auto;
     .step {
       display: flex;
-      justify-content: center;
-      align-items: start;
+      align-items: center;
       gap: 1rem;
       margin: 2.5rem 0;
       @media all and (max-width: $large-device) {
@@ -484,14 +511,9 @@ nav {
       }
       .flex {
         display: flex;
+        align-items: center;
         gap: 1rem;
       }
-      img {
-        @media all and (min-width: $large-device) {
-          position: relative;
-          top: -60px;
-        }
-      }
     }
     .number {
       font-size: 5rem;
@@ -513,7 +535,7 @@ nav {
     }
     .header {
       font-weight: 900;
-      font-size: 1.6rem;
+      font-size: 1.5rem;
       margin-bottom: 0.5rem;
       @media all and (max-width: $large-device) {
         font-size: 1.2rem;
-- 
GitLab