diff --git a/inc/module-class.php b/inc/module-class.php
index 4f6941f..24cf898 100644
--- a/inc/module-class.php
+++ b/inc/module-class.php
@@ -1,5 +1,7 @@
 <?php function sleek_module_class ($styles) {
 	$classes[] = 'section';
 
+	\Sleek\Utils\log($styles);
+
 	return implode(' ', $classes);
 }
\ No newline at end of file
diff --git a/modules/invise-example-module/style.scss b/modules/invise-example-module/style.scss
index 1955394..f0724ad 100644
--- a/modules/invise-example-module/style.scss
+++ b/modules/invise-example-module/style.scss
@@ -1,8 +1,4 @@
 #invise-example-module {
-	> .bg {
-		display: none;
-	}
-
 	> div {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
diff --git a/src/sass/components/bg.scss b/src/sass/components/bg.scss
new file mode 100644
index 0000000..cae22a0
--- /dev/null
+++ b/src/sass/components/bg.scss
@@ -0,0 +1,44 @@
+.bg--dark {
+	--text-color: white;
+	--heading-color: white;
+	--link-color: white;
+
+	background-color: black;
+	color: var(--text-color);
+}
+
+// Media
+.bg--media,
+.bg--media-light {
+	position: relative;
+
+	> figure.bg {
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+
+		img,
+		video {
+			object-fit: cover;
+			object-position: center center;
+		}
+	}
+}
+
+// Dark media
+.bg--media {
+	--text-color: white;
+	--heading-color: white;
+	--link-color: white;
+
+	color: var(--text-color);
+}
+
+// Light media
+.bg--media-light {
+	--text-color: black;
+	--heading-color: black;
+	--link-color: black;
+
+	color: var(--text-color);
+}
\ No newline at end of file