🧑‍💻 Adjust about lab section to mobile

_includes/about_lab.html

@@ -1,25 +1,20 @@
 <div class="about-lab-wrapper">
+    <div class="about-content">
+        <h1>Sobre o LAPPIS</h1>
+        <h4 class="about-text">O Laboratório Avançado de Produção, Pesquisa e Inovação em Software, foi projetado para atuar em diversas áreas tecnológicas, desde sistemas de informação até sistemas embarcados, objetivando as oportunidades de pesquisas teóricas e aplicadas.</h4> 
+        <h4 class="about-text">Além disso, tem como objetivo contribuir com o desenvolvimento de projetos de software ao passo que complementamos a formação de Engenheiros de Software, capazes de lidar com problemas ao pensar em soluções computacionais e implamentá-las efetivamente, por meio de métodos ágeis, software livre, segurança e trabalho colaborativo centrado nas pessoas.</h4>    
+    </div>
     <div class="imagens-grid-wrapper">
-        <div class="imagens-grid-container">
-            <div class="grid-wrapper">
-                <img src="/_images/about_lab/lab_photo.jpg">
-            </div>
+        <div class="images-column big-image">
+            <img src="/_images/about_lab/carla_ahazando.jpg">
+        </div>
+        <div class="images-column">
             <div class="grid-wrapper">
                 <img src="/_images/about_lab/conf.png">
             </div>
-        </div>
-        <div class="imagens-grid-container">
-            <div class="grid-wrapper-3">
-                <h1>Sobre o LAPPIS</h1>
-            </div>
-            <div class="grid-wrapper big-image">
-                <img src="/_images/about_lab/carla_ahazando.jpg">
+            <div class="grid-wrapper">
+                <img src="/_images/about_lab/lab_photo.jpg">
             </div>
         </div>
     </div>
-
-    <div class="about-content">
-        <h4 class="about-text">O Laboratório Avançado de Produção, Pesquisa e Inovação em Software, foi projetado para atuar em diversas áreas tecnológicas, desde sistemas de informação até sistemas embarcados, objetivando as oportunidades de pesquisas teóricas e aplicadas.</h4> 
-        <h4 class="about-text">Além disso, tem como objetivo contribuir com o desenvolvimento de projetos de software ao passo que complementamos a formação de Engenheiros de Software, capazes de lidar com problemas ao pensar em soluções computacionais e implamentá-las efetivamente, por meio de métodos ágeis, software livre, segurança e trabalho colaborativo centrado nas pessoas.</h4>    
-    </div>
 </div>

_includes/bubble_background.html

@@ -1,13 +1,4 @@
 <div class="gradient-bg">
-  <svg xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <filter id="goo">
-        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
-        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo" />
-        <feBlend in="SourceGraphic" in2="goo" />
-      </filter>
-    </defs>
-  </svg>
   <div class="gradients-container">
     <div class="g1"></div>
     <div class="g2"></div>

_sass/_about-lab.scss

@@ -1,83 +1,63 @@
 .about-lab-wrapper {
-    background-color: #14193d;
-    padding: 30px 12%;
-    display: flex;
-}
-
-.about-content {
-    width: 30%;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    min-height: 80vh;
+    width: 100%;
 
-    .about-text {
-        font-size: 14px;
-        color: white;
-        text-align: right;
-    }
+    background-color: #14193d;
 }
 
-
 .imagens-grid-wrapper {
     display: flex;
-    width: 65%;
 
-    margin-right: 40px;
+    img {
+        filter: grayscale(100%);
+        transition: all 0.4s ease-in-out;
+
+        &:hover {
+            filter: grayscale(0%);
+        }
+    }
 }
 
-.imagens-grid-container {
+.images-column {
     width: 50%;
+}
 
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    .grid-wrapper-3 {
-        height: 25%;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        h1 {
-            text-align: center;
-            color: white;
-            margin: 0;
-            font-size: 35px;
-            font-weight: 600;
-        }
+.grid-wrapper {
+    height: 50%;
+    img {
+        object-fit: cover;
+        height: 100%;
     }
-
-
+}
 
-    .big-image {
-        height: 75%;
+.big-image {
+    img { 
+        object-fit: cover;
+        height: 100%;
     }
+}
 
+.about-content {
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0px 30px;
 
-    .grid-wrapper {
-        transition: all 0.4s ease-in-out;
-        filter: blur(0.02rem);
-
-        padding: 20px;
-
-        &:hover {
-            filter: blur(0rem);   
-        }
+    .about-text {
+        font-size: 14px;
+        color: white;
+        text-align: left;
     }
 
-    img {
-        filter: grayscale(100%);
-
-        box-shadow: 0 1px 2px #4250be1d;
-        transition: all 0.4s ease-in-out;
-        object-fit: cover;
-
-        &:hover {
-            filter: grayscale(0%);
-
-            box-shadow: 0 5px 30px rgba(66, 80, 190, 0.499);
-        }
-    }   
+    h1 {
+        text-align: center;
+        color: white;
+        margin: 0;
+        margin-bottom: 20px;
+        font-size: 35px;
+        font-weight: 600;
+    }
 }

_sass/_bubble-background.scss

@@ -36,7 +36,6 @@
 
 
 .gradient-bg {
-  width: 100vw;
   height: 100vh;
   position: relative;
   overflow: hidden;

_sass/_home-message.scss

@@ -1,8 +1,8 @@
 .home-message {
   z-index: 99;
-  width: 100vw;
   height: 100vh;
-
+  width: 100%;
+
   position: absolute;
   top: 0;
   left: 0;

_sass/_last-editions.scss

@@ -1,5 +1,4 @@
 .last-editions-wrapper {
-    width: 100vw;
     height: 90vh;
 
     display: flex;

_sass/_layout-mobile.scss

@@ -10,7 +10,6 @@
         justify-content: flex-end;
 
 
-        width: 100vw;
         height: 100vh;
         bottom: 0px;
 
@@ -109,4 +108,13 @@
             text-align: justify;
         }
     }
+
+    // Seção sobre o LAPPIS
+    .about-lab-wrapper {
+        flex-direction: column;
+    }
+
+    .about-content {
+        margin: 60px 0px;
+    }
 }