Style how it works section

1 files changed, 58 insertions, 0 deletions

diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss
index 9debf2f..d6858d8 100644
--- a/assets/stylesheets/responsive/custom.scss
+++ b/assets/stylesheets/responsive/custom.scss
@@ -575,6 +575,64 @@ dt {
     }
 }
 
+/* How it works section */
+.steps__list {
+  li {
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
+      width: 33.3333%;
+      margin-left: 0 !important;
+    }
+  }
+}
+
+.steps__step-box {
+  background-color: $color_white;
+  padding: 2em;
+  box-shadow: 0 1px 2px transparentize($color_black, 0.75);
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    min-height: 11em;
+  }
+  p {
+    line-height: 1.5em;
+    color: $color_black_alt;
+  }
+}
+
+.steps__step-number {
+  height: 3.5em;
+  width: 3.5em;
+  background-color: $color_green;
+  box-shadow: 0 1px 2px transparentize($color_black, 0.75);
+  padding: 1em;
+  border-radius: 100%;
+  color: $color_white;
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    left: 50%;
+    margin-left: -1.75em;
+    bottom: -1em;
+    top: auto;
+  }
+}
+
+li:nth-child(2) {
+  .steps__step-number {
+    background-color: $color_blue;
+  }
+}
+
+li:nth-child(3) {
+  .steps__step-number {
+    background-color: $color_orange;
+  }
+}
+
+.learn-more-foi {
+  @extend .button-secondary;
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    margin-top: 2em;
+  }
+}
+
 /* Authority page */
 .action-bar__follower-count {
   padding: 3px;