Add block margins to the .component class

No longer scoped to being inside of the main element

Author: NicolaSaunders

assets-src/styles/core.scss

@@ -69,6 +69,7 @@
 /*------------------------------------*\
     #Core components
 \*------------------------------------*/
+@import "sass/50-core-components/component";
 @import "sass/50-core-components/avatars";
 @import "sass/50-core-components/header";
 @import "sass/50-core-components/archive-banner";

assets-src/styles/sass/50-core-components/_component.scss

@@ -0,0 +1,18 @@
+/*------------------------------------*\
+    #Component
+
+    Extra vertical margin on anything with a class of `.component`
+\*------------------------------------*/
+
+.component {
+    margin-block: rem(80);
+
+    @include mq($bp-tab-small) {
+        margin-block: rem(100);
+    }
+}
+
+/* Full width components tend to have a background colour, where we don't want white space in between */
+.component.u-full-width + .component.u-full-width {
+    margin-block: 0;
+}

assets-src/styles/sass/50-core-components/_main.scss

@@ -15,16 +15,4 @@ main,
 	max-inline-size: rem($max-width);
 	padding-block: rem(24) rem(100);
     padding-inline: 5vw;
-}
-
-// #main .component + .component {
-// 	margin-block-start: rem(80);
-//
-// 	@include mq($bp-tab-small) {
-//         margin-block-start: rem(100);
-// 	}
-// }
-
-// #main .component.u-full-width + .component.u-full-width {
-// 	margin-block-start: 0;
-// }
+}