From 2f8a8bf527f7bf6792d4eb349957782eaf65420b Mon Sep 17 00:00:00 2001
From: Isabelle <isabelle@dewebsmid.nl>
Date: Tue, 6 Jan 2026 11:54:52 +0100
Subject: [PATCH] feat(extra-features): Add section-spacer utility class

This is  a class used to standardize spacing between sections of the site, especially the home page.
---
 .../theme/custom/abstracts/_utilities.scss    | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss
index 73b6d30..57886ea 100644
--- a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss
+++ b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss
@@ -1,3 +1,32 @@
 // Header selector for interpolation
 // Example usage: #{$headings} { ... }
 $headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
+
+// Section Spacers
+$section-spacer: rem-calc(50px);
+$section-spacer-small: rem-calc(25px);
+
+.section-spacer-both {
+    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-bottom: calc($section-spacer-small * 2);
+        }
+    }
+}
+
+.section-spacer {
+    @extend .section-spacer-both;
+    margin-bottom: unset;
+    &--small {
+        margin-bottom: unset;
+    }
+}