mobile styles

client/src/style/index.less

@@ -212,19 +212,27 @@ button, [type=submit] {
 
 .landing {
     display: grid;
-    grid-template-columns: 1fr 0.5fr 2fr;
+
+    grid-template-columns: 1fr 2fr;
+    grid-gap: calc(var(--spacing-double) * 2);
+    grid-template-areas:
+        "login swirl"
+        "login words";
 
     .login {
+        grid-area: login;
         button {
             width: 100%;
         }
     }
 
     .swirl {
+        grid-area: swirl;
         height: 15rem;
     }
 
-    .text {
+    .words {
+        grid-area: words;
         text-align: center;
     }
 }
@@ -274,13 +282,14 @@ article {
 
 .search {
     display: grid;
-    grid-template-columns: 1fr 0.5fr 2fr;
+    grid-template-columns: 1fr 2fr;
+    grid-gap: calc(var(--spacing-double) * 2);
 
     article {
         display: grid;
         padding: var(--spacing);
         margin-bottom: var(--spacing);
-        grid-template-columns: 1fr 4fr 1fr;
+        grid-template-columns: 1fr 4fr min-content;
     }
 
     button {
@@ -324,6 +333,10 @@ article {
         }
 
         padding: var(--spacing);
+
+        img {
+            justify-self: end;
+        }
     }
 }
 
@@ -482,4 +495,42 @@ header {
     background-position: center;
 
     margin-bottom: var(--spacing);
-}
+}
+
+@media (max-width:900px)  {
+    .landing {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "swirl"
+            "login"
+            "words";
+    }
+
+    .list {
+        grid-template-columns: 1fr;
+    }
+
+    .search {
+        grid-template-columns: 1fr;
+    }
+
+    .offers {
+        grid-template-columns: 1fr;
+    }
+
+    .info {
+        grid-template-columns: 1fr;
+        // is necessary for some reason
+        grid-template-areas:
+            "swirl"
+            "contact"
+            "words";
+    }
+}
+
+@media (max-width:1200px) {
+    img {
+        width: 5rem;
+    }
+}
+