fix(reference-button): Set new margins (#1324)

Author: imklau

src/_includes/components/signpost.html

@@ -4,7 +4,7 @@
 {% endunless %}
 {{section.section_description}}
 
-<div class="flex flex--wrap gutter gutter--large">
+<div class="flex flex--wrap waffle waffle--large">
   {% for category in section.section %}
     <div class="flex__column flex__column--12 flex__column--{{section.section_col}}@medium flex">
       {% include components/reference-button.html

src/_sass/components/_markdown.scss

@@ -236,5 +236,21 @@
       grid-template-columns: 1fr 1fr;
       grid-gap: 20px
     }
+
+    // double is another div in .markdown container and that's why it has 16px margin top
+    .reference-button {
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+  }
+
+  // remove reference button margins when it's inside the flex component (flex with waffle has its own margins) 
+  .flex {
+    &.waffle {
+      .reference-button {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
   }
 }

src/_sass/components/_reference-button.scss

@@ -12,6 +12,8 @@
 
   @include breakpoint(large up) {
     grid-template-areas: "icon heading" "icon content";
+    margin-top: 24px;
+    margin-bottom: 24px;
   }
 
   svg {