feat(API-1976): Correct GT tags UI for mobile device

Author: samokiss

src/partials/guided-tutorials-homepage.handlebars

@@ -26,7 +26,7 @@
                 <div class="tile-list">
                     {{#each tutorials}}
                         <a href="{{link}}" class="tile-title">
-                            <div class="tile mrb-30">
+                            <div class="tile margin-tile">
                                 {{title}}
                                 <div class="tile-tag">
                                     {{#use_cases}}

styles/apps-homepage.less

@@ -118,6 +118,7 @@
   font-size: 20px;
   line-height: 24px;
   margin: 44px 0 38px 0;
+  color: #414D97;
   p {
     margin: 0;
   }
@@ -135,7 +136,7 @@
   }
 
   .arrow-back img {
-    margin-top: 42px;
+    margin-top: 18px;
     margin-left: 10px;
     margin-right: 10px;
     align-items: center;
@@ -154,10 +155,56 @@
 
   .block-create-app-github {
     width: 36px;
-    margin-left: 17px;
+    margin-left: 31px;
+    margin-right: 13px;
   }
 
   .block-create-app-title {
     margin-left: 17px;
   }
+
+  .block-about-app-title {
+    font-size: 18px;
+  }
+
+  .block-about-app {
+    margin-top: 20px;
+    padding: 25px 20px;
+  }
+
+  .block-about-app-text {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 17px;
+    margin-top : 28px;
+
+  }
+
+  .block-about-app-row .block-about-app-text {
+    width: 100%;
+  }
+
+  .block-create-app-title {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 24px;
+    text-align: center;
+  }
+
+  .block-create-app-text {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+    margin: 28px 0 30px 0;
+    p {
+      line-height: 1.2;
+      margin-right: 31px;
+    }
+  }
+
+  .block-create-app-row .next-steps-button {
+    margin-top: 16px;
+  }
 }

styles/guided-tutorial.less

@@ -445,12 +445,11 @@
     .tile-list {
         display: flex;
         flex-direction: row;
-        flex-wrap: wrap;
         margin-top: 21px;
         width: 770px;
     }
 
-    .mrb-30 {
+    .margin-tile {
         margin-right: 30px;
         margin-bottom: 30px;
     }
@@ -542,3 +541,68 @@
 
         color: #677688;
     }
+    .block-welcome-row .block-welcome-text {
+        width: 68.5%;
+    }
+
+    @media only screen and (max-width: 820px) {
+        .container {
+            padding-right: 42px;
+            padding-left: 18px;
+            margin-right: auto;
+            margin-left: auto;
+        }
+
+        .tutorial-title {
+            font-style: normal;
+            font-weight: 700;
+            font-size: 30px;
+            line-height: 36px;
+
+            text-align: center;
+        }
+
+        .guided-tutorials h1 {
+            margin-top: 20px;
+        }
+
+        .next-steps-button {
+            width: 135px;
+            height: 54px;
+            gap: 8px;
+            border-radius: 80px;
+            .next-steps-button-text{
+                font-weight: 700;
+                font-size: 14px;
+                line-height: 17px;
+            }
+            .next-steps-button-number {
+                font-weight: 700;
+                font-size: 37px;
+                line-height: 44px;
+            }
+        }
+
+        .feature-list {
+            flex-wrap: wrap;
+            margin-bottom: 0;
+            margin-top: 10px;
+        }
+
+        .filtered-result {
+            margin-top: 30px;
+        }
+
+        .tag-selectable {
+            margin-bottom: 16px;
+        }
+
+        .tile-list {
+            flex-wrap: wrap;
+            width: 100%;
+        }
+
+        .margin-tile {
+            margin-right: 0;
+        }
+    }