cleaning up mobile styling, functionality and styling for accordian

styles/_buttons.scss

@@ -102,3 +102,33 @@ p + .readmore {
   }
 }
 
+.accordian-row {
+  background: $gray-800;
+  border-radius: 5px;
+  padding: 32px;
+  h3 {
+    width: calc(100% - 32px);
+  }
+  a {
+    &:hover {
+      color: $white;
+    }
+    &::after {
+      -webkit-transition: transform 0.3s ease-out;
+      -moz-transition: transform 0.3s ease-out;
+      -ms-transition: transform 0.3s ease-out;
+      -o-transition: transform 0.3s ease-out;
+      transition: transform 0.3s ease-out;
+      transform: rotate(180deg);
+      position: absolute;
+      right: 32px;
+      content: url(../../img/icons/purple-arrow.svg);
+    }
+    &.collapsed {
+      &::after {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
+

styles/_font.scss

@@ -89,8 +89,8 @@ h6, .h6 {
   color: $gray-100;
   font-weight: normal;
   @include media-breakpoint-down(sm) {
-    font-size: 1rem;
-    line-height: 24px;
+    font-size: 1.125rem;
+    line-height: 26px;
   }
 }
 .numbers {

styles/_helpers.scss

@@ -23,6 +23,9 @@
 .w48 {
   width: 48px;
 }
+.w-100 {
+  width: 100%;
+}
 .min-vh100 {
   min-height: 100vh;
 }
@@ -59,6 +62,11 @@
 }
 .mb-8 {
   margin-bottom: 2rem;
+  &-sm {
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 2rem;
+    }
+  }
 }
 .mt-8 {
   margin-top: 2rem;
@@ -74,6 +82,12 @@
 }
 .mb-10 {
   margin-bottom: 2.5rem;
+  &-until-sm {
+    @include media-breakpoint-up(sm) {
+      margin-left: 2.5rem;
+      margin-right: 2.5rem;
+    }
+  }
 }
 .ml-10 {
   margin-left: 2.5rem;
@@ -94,6 +108,12 @@
       margin-right: 2.5rem;
     }
   }
+  &-until-md {
+    @include media-breakpoint-up(md) {
+      margin-left: 2.5rem;
+      margin-right: 2.5rem;
+    }
+  }
   &-sm {
     @include media-breakpoint-down(sm) {
       margin-left: 2.5rem;
@@ -201,8 +221,31 @@
     }
   }
 }
-.p-40 {
-  padding: 40px;
+.pl-0-sm {
+  @include media-breakpoint-down(sm) {
+    padding-left: 0 !important;
+  }
+}
+.pr-0-sm {
+  @include media-breakpoint-down(sm) {
+    padding-right: 0 !important;
+  }
+}
+.p-8 {
+  padding: 2rem;
+  &-sm {
+    @include media-breakpoint-down(sm) {
+      padding: 2rem;
+    }
+  }
+}
+.p-10 {
+  padding: 2.5rem;
+  &-until-sm {
+    @include media-breakpoint-up(sm) {
+      padding: 2.5rem;
+    }
+  }
 }
 .py-20 {
   padding-bottom: 5rem;
@@ -217,6 +260,10 @@
 .py-26 {
   padding-top: 6.5rem;
   padding-bottom: 6.5rem;
+  @include media-breakpoint-down(sm) {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
 }
 .pt-30 {
   padding-top: 7.5rem;
@@ -337,9 +384,17 @@
 .green-500 {
   color: $green-500;
 }
+.white {
+  color: $white;
+}
 
 /* ETC */
 .br-8 {
   border-radius: 8px;
 }
+br {
+  &.until-sm {
+    content: '';
+  }
+}
 

styles/_landings.scss

@@ -136,7 +136,7 @@
   }
 
   section:first-of-type {
-    padding-top: 0;
+    // padding-top: 0;
     border-top-width: 0;
   }
 

styles/_layout.scss

@@ -125,6 +125,9 @@ section {
     }
     .col-new {
       margin: 20px;
+      @include media-breakpoint-down(md) {
+        margin: 20px 0;
+      }
     }
   }
 
@@ -230,7 +233,7 @@ $columns: 12; // Number of columns in the grid system
     background-size: contain;
 
     @include media-breakpoint-down(lg) {
-      margin: 24px;
+      margin: 24px 0;
     }
     @include media-breakpoint-down(sm) {
       margin: 0 0 40px;