rescaled button search

asset/scss/components/_forms.scss

@@ -1,21 +1,34 @@
 // .hero{
   .search{
-    .input-group * {
-      margin: 0;
-    }
+    @include xy-grid();
+    // display: flex;
+    // flex-direction: column;
+    // align-items: center;
     .input-group {
+      @include breakpoint(small){
+        @include xy-cell (12);
+      }
+      @include breakpoint(medium){
+        @include xy-cell (6);
+      }
+      @include breakpoint(medium){
+        @include xy-cell (4);
+      }
       position: relative;
       border-radius: 4rem;
       overflow: hidden;
       padding: 0;
       margin: 0;
-    }
-    .input-group .appear {
+      .appear {
         right: 0;
         position: absolute;
         height: 100%;
         padding: 0.3rem 1rem;
       }
+    }
+    .input-group * {
+      margin: 0;
+    }
     .button{
       border-color: $primary-color;
     }
@@ -35,7 +48,7 @@
         border:none;
         background-color: $input-background-focus;
         position: relative;
-        right: 2rem;
+        // right: 2rem;
         + .appear {
           display: block;
           background-color: scale-color($input-background-focus, $lightness: -20%);

asset/scss/modules/_content.scss

@@ -222,6 +222,11 @@ main {
       }
     }
   }
+  .load_more {
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+  }
   .accordion-content {
     padding-top: 0;
     section {