queries 575px

Author: dmsanchez86

src/assets/scss/base.scss

@@ -495,4 +495,67 @@ body{
   .header-top ul li a, .header-top a {
     font-size: 1.15rem;
   }
+}
+
+@media(max-width: 575px){
+  .panel {
+    > .grid-2{
+      .grid{
+        grid-template-columns: 1fr;
+        column-gap: 1rem;
+        row-gap: 1rem;
+      }
+    }
+    
+    .grid-5{
+      grid-template-columns: 1fr;
+    }
+    
+    form .grid-2{
+      grid-template-columns: 1fr;
+    }
+  }
+  .grid-main.nav-open .nav ul li:not(.logo) a {
+    grid-template-columns: 40px 50px;
+  }
+
+  .nav ul li a {
+    font-size: 1.1rem;
+  }
+  .logo span {
+    font-size: 2rem;
+  }
+
+  .grid-main.nav-open .nav ul .logo a span {
+    font-size: 3rem;
+  }
+  .nav ul li:not(.logo) a span:last-child {
+    font-size: .7rem;
+  }
+
+  .notification{
+    flex-direction: column;
+    padding-bottom: .75rem;
+    justify-content: start;
+    align-items: inherit;
+  }
+  .notification .form{
+    flex: 1 1 100%;
+  }
+
+  .content-title h1 {
+    font-size: 1rem
+  }
+
+  .panel-title {
+    font-size: .85rem;
+    margin: 0 0 .5rem;
+  }
+  .panel-btn {
+    font-size: .8rem;
+  }
+  .panel-inputs {
+    grid-template-columns: 1fr;
+    row-gap: 1rem;
+  }
 }