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

assets/sass/_init.scss

@@ -11,7 +11,5 @@
 
 // Mixins and functions.
 @import 'mixins/breakpoint/respond-to';
-@import 'mixins/clearfix/clearfix';
 @import 'mixins/flex-calc/flex-calc';
-@import 'mixins/overlay/overlay';
 @import 'mixins/spacing/spacing';

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 {
-%clearfix {
+  &::before {
-  @include clearfix();
+    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;
+}

assets/sass/mixins/clearfix/_clearfix.scss

@@ -1,19 +0,0 @@
-// clearfix()
-//
-// Allows the bottom of an element to extend to the bottom of all floated
-// children elements. @see http://nicolasgallagher.com/micro-clearfix-hack/
-//
-// We use the micro-clearfix, optimized for use in `@extend` where fewer `&` is
-// better.
-@mixin clearfix() {
-  &::before {
-    content: '';
-    display: table;
-  }
-
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}

assets/sass/styles.scss

@@ -50,12 +50,14 @@
 @import 'components/list-straight-left/list-straight-left';
 @import 'components/messages/messages';
 @import 'components/meta/meta';
+@import 'components/overlay/overlay';
 @import 'components/pager/pager';
 @import 'components/responsive-video/responsive-video';
 @import 'components/spacing/spacing';
 @import 'components/tables/tables';
 @import 'components/tags/tags';
 @import 'components/visually-hidden/visually-hidden';
+@import 'components/wrap/wrap';
 
 // Zen styles