diff --git a/src/landing/index.html b/src/landing/index.html
index 80306acb..4677b61b 100644
--- a/src/landing/index.html
+++ b/src/landing/index.html
@@ -36,18 +36,18 @@
                   <img src="../static/img/ylitse-middle-illustration.svg" class="middle-illustration" />
                </div>
                <div class="middle-right-content">
-                 <div>
-                    <h2 localization-key="middleInfo1Heading"></h2>
-                    <p class="card-p white" localization-key="middleInfo1Text"></p>
-                 </div>
-                 <div>
-                    <h2 localization-key="middleInfo2Heading"></h2>
-                    <p class="card-p white" localization-key="middleInfo2Text"></p>
-                 </div>
-                 <div>
-                    <h2 localization-key="middleInfo3Heading"></h2>
-                    <p class="card-p white" localization-key="middleInfo3Text"></p>
-                 </div>
+                  <div>
+                     <h2 localization-key="middleInfo1Heading"></h2>
+                     <p class="card-p white" localization-key="middleInfo1Text"></p>
+                  </div>
+                  <div>
+                     <h2 localization-key="middleInfo2Heading"></h2>
+                     <p class="card-p white" localization-key="middleInfo2Text"></p>
+                  </div>
+                  <div>
+                     <h2 localization-key="middleInfo3Heading"></h2>
+                     <p class="card-p white" localization-key="middleInfo3Text"></p>
+                  </div>
                </div>
             </div>
             <div class="middle-bottom-footer">
@@ -61,117 +61,117 @@ <h2 class="black" localization-key="bottomContentHeader"></h2>
                <p localization-key="bottomContentText"></p>
             </div>
             <div class="bottom-bottom-content">
-              <div class="mentor-card-item">
-                 <img src="../static/img/mentor-left.svg" class="mentor" />
-                 <div class="mentor-card-container">
-                    <div class="mentor-card-header">
-                       <img src="../static/icons/chat-profilepic.svg" />
-                       <div class="mentor-card-header-text-container">
-                          <h2 class="card-h2">Aalto</h2>
-                          <p class="card-p white">42 v.  |  Etelä-Pohjanmaa </p>
-                          <p class="card-p white">Olen tavoitettavissa joka päivä ...</p>
-                       </div>
-                    </div>
-                    <div class="mentor-card-content">
-                       <div class="mentor-card-story-container">
-                          <h2 class="card-h2 black" localization-key="mentorCardMyStory"></h2>
-                          <p class="card-p">Olen nuorisokodista itsenäistynyt teini-ikäisen pojan vanhempi. Voin olla sinulle tukena opintoihin, itsenäistymiseen, jälkihuoltoon ja vanhemmuuteen liittyvissä asioissa.</p>
-                       </div>
-                       <div class="mentor-card-languages-container">
-                          <h2 class="card-h2 black" localization-key="mentorCardSpokenLanguages"></h2>
-                          <div class="pill-container">
-                             <div class="pill">
-                                <p class="card-p">Suomi</p>
-                             </div>
-                             <div class="pill">
-                               <p class="card-p">Englanti</p>
-                             </div>
-                          </div>
-                       </div>
-                       <div class="mentor-card-skill-container">
-                          <h2 class="card-h2 black" localization-key="mentorCardSkills"></h2>
-                          <div class="pill-container">
-                             <div class="pill">
-                                <p class="card-p">Lastensuojelu</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Itsenäistyminen</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Vanhemmuus</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Opinnot</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Kela</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Stressi</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Oma lapsuus</p>
-                             </div>
-                          </div>
-                       </div>
-                    </div>
-                 </div>
-              </div>
-              <div class="mentor-card-item">
-                 <div class="mentor-card-container">
-                    <div class="mentor-card-header">
-                       <img src="../static/icons/chat-profilepic.svg" />
-                       <div class="mentor-card-header-text-container">
-                          <h2 class="card-h2">Havu</h2>
-                          <p class="card-p white">27 v.  |  Uusimaa </p>
-                          <p class="card-p white">Olen tavoitettavissa joka päivä ...</p>
-                       </div>
-                    </div>
-                    <div class="mentor-card-content">
-                       <div class="mentor-card-story-container">
-                          <h2 class="card-h2 black" localization-key="mentorCardMyStory"></h2>
-                          <p class="card-p">Olen helsinkiläinen Havu. Voin olla sinulle tukena esimerkiksi mielenterveyteen liittyvissä pulmissa. Tuen sinua parhaani mukaan kuitenkin missä tahansa aiheessa.</p>
-                       </div>
-                       <div class="mentor-card-languages-container">
-                          <h2 class="card-h2 black" localization-key="mentorCardSpokenLanguages"></h2>
-                          <div class="pill-container">
-                             <div class="pill">
-                                <p class="card-p">Suomi</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Ruotsi</p>
-                             </div>
-                          </div>
-                       </div>
-                       <div class="mentor-card-skill-container">
-                          <h2 class="card-h2 black" localization-key="mentorCardSkills"></h2>
-                          <div class="pill-container">
-                             <div class="pill">
-                                <p class="card-p">Mielenterveys</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Syömishäiriöt</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Opinnot</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Päihteet</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Eroperhe</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Stressi</p>
-                             </div>
-                             <div class="pill">
-                                <p class="card-p">Lasinen lapsuus</p>
-                             </div>
-                          </div>
-                       </div>
-                    </div>
-                 </div>
-                 <img src="../static/img/mentor-right.svg"  class="mentor"/>
+               <div class="mentor-card-item">
+                  <img src="../static/img/mentor-left.svg" class="mentor" />
+                  <div class="mentor-card-container">
+                     <div class="mentor-card-header">
+                        <img src="../static/icons/chat-profilepic.svg" />
+                        <div class="mentor-card-header-text-container">
+                           <h2 class="card-h2">Aalto</h2>
+                           <p class="card-p white">42 v.  |  Etelä-Pohjanmaa </p>
+                           <p class="card-p white">Olen tavoitettavissa joka päivä ...</p>
+                        </div>
+                     </div>
+                     <div class="mentor-card-content">
+                        <div class="mentor-card-story-container">
+                           <h2 class="card-h2 black" localization-key="mentorCardMyStory"></h2>
+                           <p class="card-p">Olen nuorisokodista itsenäistynyt teini-ikäisen pojan vanhempi. Voin olla sinulle tukena opintoihin, itsenäistymiseen, jälkihuoltoon ja vanhemmuuteen liittyvissä asioissa.</p>
+                        </div>
+                        <div class="mentor-card-languages-container">
+                           <h2 class="card-h2 black" localization-key="mentorCardSpokenLanguages"></h2>
+                           <div class="pill-container">
+                              <div class="pill">
+                                 <p class="card-p">Suomi</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Englanti</p>
+                              </div>
+                           </div>
+                        </div>
+                        <div class="mentor-card-skill-container">
+                           <h2 class="card-h2 black" localization-key="mentorCardSkills"></h2>
+                           <div class="pill-container">
+                              <div class="pill">
+                                 <p class="card-p">Lastensuojelu</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Itsenäistyminen</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Vanhemmuus</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Opinnot</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Kela</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Stressi</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Oma lapsuus</p>
+                              </div>
+                           </div>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+               <div class="mentor-card-item">
+                  <div class="mentor-card-container">
+                     <div class="mentor-card-header">
+                        <img src="../static/icons/chat-profilepic.svg" />
+                        <div class="mentor-card-header-text-container">
+                           <h2 class="card-h2">Havu</h2>
+                           <p class="card-p white">27 v.  |  Uusimaa </p>
+                           <p class="card-p white">Olen tavoitettavissa joka päivä ...</p>
+                        </div>
+                     </div>
+                     <div class="mentor-card-content">
+                        <div class="mentor-card-story-container">
+                           <h2 class="card-h2 black" localization-key="mentorCardMyStory"></h2>
+                           <p class="card-p">Olen helsinkiläinen Havu. Voin olla sinulle tukena esimerkiksi mielenterveyteen liittyvissä pulmissa. Tuen sinua parhaani mukaan kuitenkin missä tahansa aiheessa.</p>
+                        </div>
+                        <div class="mentor-card-languages-container">
+                           <h2 class="card-h2 black" localization-key="mentorCardSpokenLanguages"></h2>
+                           <div class="pill-container">
+                              <div class="pill">
+                                 <p class="card-p">Suomi</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Ruotsi</p>
+                              </div>
+                           </div>
+                        </div>
+                        <div class="mentor-card-skill-container">
+                           <h2 class="card-h2 black" localization-key="mentorCardSkills"></h2>
+                           <div class="pill-container">
+                              <div class="pill">
+                                 <p class="card-p">Mielenterveys</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Syömishäiriöt</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Opinnot</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Päihteet</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Eroperhe</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Stressi</p>
+                              </div>
+                              <div class="pill">
+                                 <p class="card-p">Lasinen lapsuus</p>
+                              </div>
+                           </div>
+                        </div>
+                     </div>
+                  </div>
+                  <img src="../static/img/mentor-right.svg"  class="mentor"/>
                </div>
             </div>
          </div>
diff --git a/src/landing/styles.css b/src/landing/styles.css
index 8de92393..cf5bfce9 100644
--- a/src/landing/styles.css
+++ b/src/landing/styles.css
@@ -1,109 +1,109 @@
 html,
 body {
-  min-height: 100%;
-  background-color: #E4F3FB;
+	min-height: 100%;
+	background-color: #E4F3FB;
 }
 
 main {
-  display: flex;
-  flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 .top-container {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
 }
 
 .card {
-  flex: 1;
-  background-color: #43BFFF;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  justify-content: center;
-  align-items: center;
-  padding: 0 5rem;
-  max-width: 40rem;
+	flex: 1;
+	background-color: #43BFFF;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+	justify-content: center;
+	align-items: center;
+	padding: 0 5rem;
+	max-width: 40rem;
 }
 
 .ylitse-logo {
-  height: 12.5rem;
+	height: 12.5rem;
 }
 
 .card-buttons {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
 }
 
 .art-jumbo-container {
-  flex: 3;
-  background: url(../static/img/home-page-background.svg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  height: 40rem;
+	flex: 3;
+	background: url(../static/img/home-page-background.svg);
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	height: 40rem;
 }
 
 p {
-  font-family: 'Baloo 2';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 1.75rem;
-  line-height: 2.188rem;
-  margin: 0;
-  color: #1c325d;
+	font-family: 'Baloo 2';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 1.75rem;
+	line-height: 2.188rem;
+	margin: 0;
+	color: #1c325d;
 }
 
 .card-p {
-  font-family: 'Baloo 2';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 26px;
-  margin: 0;
-  color: #1c325d;
+	font-family: 'Baloo 2';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 20px;
+	line-height: 26px;
+	margin: 0;
+	color: #1c325d;
 }
 
 .white {
-  color: #ffffff;
+	color: #ffffff;
 }
 
 .black {
- color: #1C325D;
+	color: #1C325D;
 }
 
 
 .button,
 button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-size: 1.5rem;
-  line-height: 1.5rem;
-  white-space: nowrap;
-  border-radius: 1.75rem;
-  cursor: pointer;
-  box-sizing: border-box;
-  width: 12.5rem;
-  height: 3.5rem;
-  max-height: 3.5rem;
-  padding: 1rem 2rem;
-  font-family: 'Baloo 2';
-  text-decoration: none;
-  font-style: normal;
-  font-weight: 700;
-  align-self: center;
-  color: #F0BA8C; 
-  background-color: #4A2ACB;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	font-size: 1.5rem;
+	line-height: 1.5rem;
+	white-space: nowrap;
+	border-radius: 1.75rem;
+	cursor: pointer;
+	box-sizing: border-box;
+	width: 12.5rem;
+	height: 3.5rem;
+	max-height: 3.5rem;
+	padding: 1rem 2rem;
+	font-family: 'Baloo 2';
+	text-decoration: none;
+	font-style: normal;
+	font-weight: 700;
+	align-self: center;
+	color: #F0BA8C;
+	background-color: #4A2ACB;
 }
 
 .button:hover,
 a:hover {
-  background-color: #5c33ff;
-  outline: 0;
+	background-color: #5c33ff;
+	outline: 0;
 }
 
 .button:focus,
@@ -112,323 +112,322 @@ a:focus,
 a:active,
 .button:target,
 a:target {
-  background-color: #4a2acb;
-  outline: #4a2acb solid 3px;
-  outline-offset: 4px;
+	background-color: #4a2acb;
+	outline: #4a2acb solid 3px;
+	outline-offset: 4px;
 }
 
 .middle-container {
-  margin: 5rem;
-  display: flex;
-  flex-direction: column;
+	margin: 5rem;
+	display: flex;
+	flex-direction: column;
 }
 
 .middle-card {
-  background-color: #4A2ACB;
-  display: flex;
-  width: 100%;
-  border-radius: 1rem 1rem 0 0;
+	background-color: #4A2ACB;
+	display: flex;
+	width: 100%;
+	border-radius: 1rem 1rem 0 0;
 }
 
 .middle-left-content {
-  flex: 1;
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  padding: 1rem 1rem 0 1rem;
+	flex: 1;
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	padding: 1rem 1rem 0 1rem;
 }
 
 .info-ring {
- border: 6px #01A5EC solid;
- width: 12rem;
- height: 12rem;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
+	border: 6px #01A5EC solid;
+	width: 12rem;
+	height: 12rem;
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
 }
 
 .middle-illustration {
-  height: 28rem;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
+	height: 28rem;
+	width: 100%;
+	position: absolute;
+	bottom: 0;
 }
 
 .middle-right-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 4rem 2rem 4rem 0;
-  overflow: auto;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 4rem 2rem 4rem 0;
+	overflow: auto;
 }
 
 .middle-bottom-footer {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  align-items: center;
-  background-color: #43BFFF;
-  border-radius: 0 0 1rem 1rem;
-  padding: 1rem 0;
+	display: flex;
+	justify-content: center;
+	gap: 1rem;
+	align-items: center;
+	background-color: #43BFFF;
+	border-radius: 0 0 1rem 1rem;
+	padding: 1rem 0;
 }
 
 .bottom-container {
-  background-color: #D3EFFF;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  align-items: center;
-  padding: 4rem 0;
+	background-color: #D3EFFF;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+	align-items: center;
+	padding: 4rem 0;
 }
 
 .bottom-top-content {
-  display: flex;
-  flex-direction: column;
-  max-width: 48rem;
+	display: flex;
+	flex-direction: column;
+	max-width: 48rem;
 }
 
 .bottom-bottom-content {
-  display: flex;
-  gap: 2rem;
-  flex-wrap: wrap;
-  justify-content: center;
+	display: flex;
+	gap: 2rem;
+	flex-wrap: wrap;
+	justify-content: center;
 }
 
 .mentor-card-item {
-  display: flex;
+	display: flex;
 }
 
 .mentor-card-container {
-  display: flex; 
-  flex-direction: column;
-  max-width: 440px; 
-  background-color: #ffffff;
-  border-radius: 1rem;
+	display: flex;
+	flex-direction: column;
+	max-width: 440px;
+	background-color: #ffffff;
+	border-radius: 1rem;
 }
 
 .mentor-card-story-container {
-  height: 160px; 
-  text-overflow: ellipsis;
+	height: 160px;
+	text-overflow: ellipsis;
 }
 
 .mentor-card-header {
-  display: flex;
-  gap: 1rem;
-  height: 140px;
-  background-color: #4A2ACB; 
-  padding: 1rem;
-  border-radius: 1rem;
+	display: flex;
+	gap: 1rem;
+	height: 140px;
+	background-color: #4A2ACB;
+	padding: 1rem;
+	border-radius: 1rem;
 }
 
 .mentor-card-header-text-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
 }
 
 .mentor-card-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: 1rem;
 }
 
 .mentor-card-languages-container {
-  height: 80px;
+	height: 80px;
 }
 
 .mentor-card-skill-container {
-  height: 200px;
-  overflow: auto;
+	height: 200px;
+	overflow: auto;
 }
 
 .pill-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
 }
 
 .pill {
-  background-color: #D3EFFF;
-  border-radius: 16px;
-  padding: 0.25rem 0.5rem;
+	background-color: #D3EFFF;
+	border-radius: 16px;
+	padding: 0.25rem 0.5rem;
 }
 
 .mentor {
-  align-self: flex-end;
-  height: 600px;
+	align-self: flex-end;
+	height: 600px;
 }
 
 h2 {
-  font-family: 'Baloo 2';
-  font-style: normal;
-  font-weight: 600;
-  font-size: 26px;
-  line-height: 42px;
-  margin: 0;
-  color: #ffffff;
+	font-family: 'Baloo 2';
+	font-style: normal;
+	font-weight: 600;
+	font-size: 26px;
+	line-height: 42px;
+	margin: 0;
+	color: #ffffff;
 }
 
 .final-container {
-  display: flex;
-  justify-content: center;
-  background-color: #43BFFF;
-  padding: 4rem 0;
+	display: flex;
+	justify-content: center;
+	background-color: #43BFFF;
+	padding: 4rem 0;
 }
 
 .final-container-content {
-  display: flex;
-  flex-direction: column;
-  max-width: 660px; 
-  gap: 1rem;
+	display: flex;
+	flex-direction: column;
+	max-width: 660px;
+	gap: 1rem;
 }
 
 .final-button-container {
-  display: flex;
-  justify-content: center;
-  gap: 1.5rem;
+	display: flex;
+	justify-content: center;
+	gap: 1.5rem;
 }
 
 footer {
-  background-color: #01A5EC; 
-  color: #1C325D;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-  margin: 0;
+	background-color: #01A5EC;
+	color: #1C325D;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 1rem;
+	margin: 0;
 }
 
 .footer-logo {
-  background: url(../static/img/footer-logo.svg);
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 11rem;
-  height: 2.5rem;
-}
-
-@media only screen and (min-width: 2300px){
-  .middle-left-content {
-      justify-content: space-evenly;
-      padding-top: 2rem;
-  }
-}
-
-@media only screen and (max-width: 1200px){
-  .middle-container {
-      margin: 2rem;
-  }
-}
-
-@media only screen and (max-width: 1000px){
-  .middle-container {
-      margin: 1rem;
-  }
-
-  .middle-left-content {
-    flex: 1;
-    justify-content: space-evenly;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .middle-illustration {
-    display: none;
-  }
-
-  .bottom-container {
-    padding: 2rem 0;
-  }
-}
-
-
-
-@media only screen and (max-width: 880px){
-  p {
-    font-size: 20px;
-    line-height: 26px;
-  }
-
-  h2 {
-    font-size: 24px;
-    line-height: 28px;
-  }
-
-  a {
-    font-size: 20px !important;
-    line-height: 26px !important;
-    height: 2rem !important;
-    width: 8rem !important;
-  }
-
-  .card-buttons {
-   justify-content: center;
-   gap: 1rem;
-  }
-
-  .middle-container {
-      margin: 0.5rem;
-  }
-
-  .middle-card {
-    flex-direction: column-reverse;
-    height: auto;
-  }
-  
-  .middle-right-content {
-    padding: 1rem;
-  }
-
-  .middle-left-content {
-    flex: 0;
-    display: none;
-  }
-
-  .middle-bottom-footer {
-    gap: 8px;
-    padding 8px;
-  }
-
-  .info-ring {
-    width: 4rem;
-    height: 4rem;
-  }
-
-  .bottom-top-content {
-    padding: 8px;
-  } 
-
-  .final-container {
-    padding: 8px;
-  }
-
-  .mentor-card-container {
-    width: 376px;
-  }
+	background: url(../static/img/footer-logo.svg);
+	background-size: contain;
+	background-position: center;
+	background-repeat: no-repeat;
+	width: 11rem;
+	height: 2.5rem;
+}
+
+@media only screen and (min-width: 2300px) {
+	.middle-left-content {
+		justify-content: space-evenly;
+		padding-top: 2rem;
+	}
+}
+
+@media only screen and (max-width: 1200px) {
+	.middle-container {
+		margin: 2rem;
+	}
+}
+
+@media only screen and (max-width: 1000px) {
+	.middle-container {
+		margin: 1rem;
+	}
+
+	.middle-left-content {
+		flex: 1;
+		justify-content: space-evenly;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.middle-illustration {
+		display: none;
+	}
+
+	.bottom-container {
+		padding: 2rem 0;
+	}
+}
+
+
+@media only screen and (max-width: 880px) {
+	p {
+		font-size: 20px;
+		line-height: 26px;
+	}
+
+	h2 {
+		font-size: 24px;
+		line-height: 28px;
+	}
+
+	a {
+		font-size: 20px !important;
+		line-height: 26px !important;
+		height: 2rem !important;
+		width: 8rem !important;
+	}
+
+	.card-buttons {
+		justify-content: center;
+		gap: 1rem;
+	}
+
+	.middle-container {
+		margin: 0.5rem;
+	}
+
+	.middle-card {
+		flex-direction: column-reverse;
+		height: auto;
+	}
+
+	.middle-right-content {
+		padding: 1rem;
+	}
+
+	.middle-left-content {
+		flex: 0;
+		display: none;
+	}
+
+	.middle-bottom-footer {
+		gap: 8px;
+		padding 8px;
+	}
+
+	.info-ring {
+		width: 4rem;
+		height: 4rem;
+	}
+
+	.bottom-top-content {
+		padding: 8px;
+	}
+
+	.final-container {
+		padding: 8px;
+	}
+
+	.mentor-card-container {
+		width: 376px;
+	}
 
-  .mentor {
-    display: none;
-  }
-}
-
-@media only screen and (max-width: 660px){
-  .top-container {
-    flex-direction: column;
-  }
-
-  .card {
-    padding: 8px;
-  }
-
-  .ylitse-logo {
-    height: 8rem;
-  }
-
-  .middle-bottom-footer {
-    padding: 1rem;
-  }
+	.mentor {
+		display: none;
+	}
+}
+
+@media only screen and (max-width: 660px) {
+	.top-container {
+		flex-direction: column;
+	}
+
+	.card {
+		padding: 8px;
+	}
+
+	.ylitse-logo {
+		height: 8rem;
+	}
+
+	.middle-bottom-footer {
+		padding: 1rem;
+	}
 }