Remove mixins for clarfix and overlay, make them only components. Add a new wrap component.

assets/sass/components/clearfix/_clearfix.scss

@@ -3,7 +3,15 @@
 // Allows the bottom of an element to extend to the bottom of all floated child
 // elements. See http://nicolasgallagher.com/micro-clearfix-hack/
 
-.clearfix,
-%clearfix {
-  @include clearfix();
+.clearfix {
+  &::before {
+    content: '';
+    display: table;
+  }
+
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
 }

assets/sass/components/overlay/_overlay.scss

@@ -0,0 +1,5 @@
+.overlay {
+  --color-overlay: var(--color-black-20);
+  --color-overlay2: var(--color-black-10);
+  border-image: linear-gradient(var(--color-overlay), var(--color-overlay2)) fill 1;
+}

assets/sass/components/wrap/_wrap.scss

@@ -0,0 +1,7 @@
+.wrap-any {
+  overflow-wrap: anywhere;
+}
+
+.wrap-word {
+  overflow-wrap: break-word;
+}