rescaled button search

asset/scss/components/_forms.scss

@@ -1,20 +1,33 @@
 // .hero{
   .search{
-    .input-group * {
+    @include xy-grid();
-      margin: 0;
+    // 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;
+      .appear {
+        right: 0;
+        position: absolute;
+        height: 100%;
+        padding: 0.3rem 1rem;
+      }
     }
-    .input-group .appear {
+    .input-group * {
-      right: 0;
+      margin: 0;
-      position: absolute;
-      height: 100%;
-      padding: 0.3rem 1rem;
     }
     .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

@@ -197,7 +197,7 @@ main {
   }
   header {
     display: none;
-  
+
   //  margin-top: 2*$global-margin;
   //  border-top: 1px solid $body-font-color;
   //  padding: $global-padding*2 0;
@@ -222,6 +222,11 @@ main {
       }
     }
   }
+  .load_more {
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+  }
   .accordion-content {
     padding-top: 0;
     section {