feat(extra-features): introduce .section-spacer-bottom utility class

falcon/_dev/css/theme/custom/abstracts/_utilities.scss

@@ -1,28 +1,32 @@
 // Header selector for interpolation
-// Example usage: #{$headings} { ... }
+// Example usage: #{$headers} { ... }
-$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
+$headers: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
+
+// All text selector for interpolation
+$text: "#{$headers}, p, span, a, li";
+
+// Section Spacers. Just set the two variables below and it is fully responsive!
+// $section-spacer-small applies on breakpoints lg and below, OR always if specified in the class with  --small (ex. section-spacer--small).
 
-// Section Spacers
 $section-spacer: rem-calc(50px);
 $section-spacer-small: rem-calc(25px);
 
 .section-spacer-both {
+    margin-top: $section-spacer-small;
+    margin-bottom: $section-spacer-small;
+    @include bs5-media-breakpoint-up(lg) {
         margin-top: $section-spacer;
         margin-bottom: $section-spacer;
-    @include bs5-media-breakpoint-up(lg) {
-        margin-top: calc($section-spacer * 1.5);
-        margin-bottom: calc($section-spacer * 1.5);
     }
     &--small {
         margin-top: $section-spacer-small;
         margin-bottom: $section-spacer-small;
         @include bs5-media-breakpoint-up(lg) {
-            margin-top: calc($section-spacer-small * 2);
+            margin-top: $section-spacer-small;
-            margin-bottom: calc($section-spacer-small * 2);
+            margin-bottom: $section-spacer-small;
         }
     }
 }
-
 .section-spacer {
     @extend .section-spacer-both;
     margin-bottom: unset;
@@ -30,3 +34,10 @@ $section-spacer-small: rem-calc(25px);
         margin-bottom: unset;
     }
 }
+.section-spacer-bottom {
+    @extend .section-spacer-both;
+    margin-top: unset;
+    &--small {
+        margin-top: unset;
+    }
+}