diff --git a/assets/sass/_init.scss b/assets/sass/_init.scss
index 73553b1..a0cf9af 100644
--- a/assets/sass/_init.scss
+++ b/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';
diff --git a/assets/sass/components/clearfix/_clearfix.scss b/assets/sass/components/clearfix/_clearfix.scss
index 3f04a11..b728772 100644
--- a/assets/sass/components/clearfix/_clearfix.scss
+++ b/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;
+  }
 }
diff --git a/assets/sass/mixins/overlay/_overlay.scss b/assets/sass/components/overlay/_overlay.scss
similarity index 90%
rename from assets/sass/mixins/overlay/_overlay.scss
rename to assets/sass/components/overlay/_overlay.scss
index 5551d4d..acabc6d 100644
--- a/assets/sass/mixins/overlay/_overlay.scss
+++ b/assets/sass/components/overlay/_overlay.scss
@@ -1,4 +1,4 @@
-@mixin overlay() {
+.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;
diff --git a/assets/sass/components/wrap/_wrap.scss b/assets/sass/components/wrap/_wrap.scss
new file mode 100644
index 0000000..07fd687
--- /dev/null
+++ b/assets/sass/components/wrap/_wrap.scss
@@ -0,0 +1,7 @@
+.wrap-any {
+  overflow-wrap: anywhere;
+}
+
+.wrap-word {
+  overflow-wrap: break-word;
+}
diff --git a/assets/sass/mixins/clearfix/_clearfix.scss b/assets/sass/mixins/clearfix/_clearfix.scss
deleted file mode 100644
index b6afa69..0000000
--- a/assets/sass/mixins/clearfix/_clearfix.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index ccd1bf4..fcdd653 100644
--- a/assets/sass/styles.scss
+++ b/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