queries 360px

Author: dmsanchez86

src/assets/scss/base.scss

@@ -558,4 +558,50 @@ body{
     grid-template-columns: 1fr;
     row-gap: 1rem;
   }
+}
+
+@media(max-width: 360px){
+  .panel {
+    > .grid-2{
+      .grid{
+        grid-template-columns: 1fr;
+        column-gap: .5rem;
+        row-gap: .5rem;
+      }
+    }
+    
+    .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: 1fr;
+  }
+
+  .nav ul li a {
+    font-size: .9rem;
+  }
+  .logo span {
+    font-size: 1.35rem;
+  }
+
+  .grid-main.nav-open .nav ul .logo a span {
+    font-size: 1.5rem;
+  }
+  .nav ul li:not(.logo) a span:last-child {
+    font-size: .55rem;
+  }
+
+  .grid-main.nav-open .nav ul li:not(.logo) a span:last-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .notification .form{
+    flex: 1 1 100%;
+  }
 }