src/pages/Institutional/styles.module.scss

@@ -1,7 +1,7 @@
 .homeDiv {
   display: flex;
   margin-top: 29px;
-  margin-left: 7.81%;
+  margin-left: 100px;
   gap: 10px;
   align-items: center;
   margin-bottom: 81px;
@@ -33,7 +33,7 @@
 
 .layoutPage {
   display: flex;
-  margin-left: 7.81%;
+  margin-left: 100px;
   margin-top: 80px;
   margin-bottom: 70px;
 
@@ -132,6 +132,8 @@
         height: 46px;
 
         &::placeholder {
+          display: flex;
+          align-items: center;
           padding: 15px 0 15px 20px;
           font-family: "Roboto";
           font-weight: 400;
@@ -186,3 +188,124 @@
     }
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .layoutPage {
+    display: flex !important;
+    flex-direction: column !important;
+    margin-left: 0 !important;
+    margin-bottom: 82px !important;
+
+    .layoutText {
+      max-width: 96.88% !important;
+      margin: 30px 16px !important;
+
+      .layoutH2 {
+        display: flex;
+        justify-content: center !important;
+        margin-top: 0px !important;
+      }
+    }
+  }
+
+  .buttonDiv {
+    width: 96.88% !important;
+    border-right: 0 !important;
+    margin: 0 16px !important;
+  }
+
+  .formDiv {
+    width: 96.98% !important;
+    margin: 0 16px !important;
+
+    .formH2 {
+      display: flex;
+      justify-content: center !important;
+      margin-top: 30px !important;
+    }
+  }
+}
+
+@media screen and (min-width: 2500px) {
+  .home {
+    width: 32px !important;
+  }
+
+  .arrow {
+    width: 10px !important;
+  }
+
+  .textHome {
+    font-size: 24px !important;
+  }
+
+  .h1Institucional {
+    font-size: 48px !important;
+  }
+
+  .buttonLayout {
+    font-size: 32px !important;
+    height: 58px !important;
+  }
+
+  .layoutPage {
+    margin-bottom: 84px !important;
+
+    .layoutText {
+      max-width: 67.2vw !important;
+
+      .layoutH2 {
+        font-size: 48px !important;
+      }
+
+      .layoutP {
+        font-size: 26px !important;
+      }
+    }
+
+    .formDiv {
+      width: 67.2vw !important;
+
+      .formH2 {
+        font-size: 48px !important;
+      }
+
+      .formLabel {
+        font-size: 28px !important;
+      }
+
+      .formLabelInstagram {
+        font-size: 28px !important;
+      }
+
+      .formSpan {
+        font-size: 24px !important;
+      }
+
+      .formField {
+        height: 63px !important;
+
+        &::placeholder {
+          font-size: 28px !important;
+        }
+      }
+
+      .formConfirm {
+        font-size: 28px !important;
+
+        .confirmField {
+          min-width: 1.44vw !important;
+        }
+      }
+
+      .buttonConfirm {
+        font-size: 32px !important;
+        height: 71px !important;
+      }
+
+      .spanConfirm {
+        font-size: 24px !important;
+      }
+    }
+  }
+}