fix(aio): api search input fix and style

aio/src/styles/1-layouts/_layout-global.scss

@@ -16,4 +16,9 @@ l-relative {
 
 .is-visible {
     display: block!important;
+}
+
+.l-flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
 }

aio/src/styles/2-modules/_api-list.scss

@@ -0,0 +1,23 @@
+
+aio-api-list {
+    div.form-search i.material-icons {
+        width: 20px;
+        pointer-events: none;
+    }
+
+    .form-search input {
+        width: 182px;
+    }
+}
+
+aio-api-list > div {
+    display: flex;
+    margin: 32px auto;
+    @media (max-width: 600px) {
+        flex-direction: column;
+    }
+
+    > div {
+        margin: 8px;
+    }
+}

aio/src/styles/2-modules/_banner.scss

@@ -0,0 +1,30 @@
+/* Banner */
+
+.banner {
+    justify-content: center;
+    background: $white;
+    box-sizing: border-box;
+    font-size: 18px;
+    font-weight: 200;
+    padding: 16px;
+    min-height: 97px;
+
+
+    @media (max-width: 480px) {
+        padding: 16px;
+    }
+
+    &.is-plain {
+        background: $white;
+        height: auto;
+        overflow: visible;
+    }
+
+
+    p, .text-body {
+        color: $darkgray;
+        font-size: 18px;
+        line-height: 32px;
+        margin: 0;
+    }
+}

aio/src/styles/2-modules/_modules-dir.scss

@@ -15,4 +15,6 @@
    @import 'subsection';
    @import 'buttons';
    @import 'hero';
-   @import 'announcement-bar';
+   @import 'announcement-bar';
+   @import 'banner';
+   @import 'api-list';