diff --git a/manon/hero-content-container.scss b/manon/hero-content-container.scss
index 2d1d1f2d..31097b74 100644
--- a/manon/hero-content-container.scss
+++ b/manon/hero-content-container.scss
@@ -1,19 +1,10 @@
 /*----------------------------------------------------------------------------------*/
 /*------------------------- hero-content-container.scss ----------------------------*/
 /*----------------------------------------------------------------------------------*/
+@use "mixins/hero";
+
 .hero {
   .content-container {
-    display: flex;
-    flex-direction: var(--hero-content-container-flex-direction);
-    justify-content: var(--hero-content-container-justify-content);
-    align-items: var(--hero-content-container-align-items);
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    padding-top: var(--hero-content-container-padding-top);
-    padding-right: var(--hero-content-container-padding-right);
-    padding-bottom: var(--hero-content-container-padding-bottom);
-    padding-left: var(--hero-content-container-padding-left);
-    z-index: 1;
+    @include hero.hero-content-container;
   }
 }
diff --git a/manon/hero-div.scss b/manon/hero-div.scss
index 53d33faf..1e52eabe 100644
--- a/manon/hero-div.scss
+++ b/manon/hero-div.scss
@@ -1,19 +1,10 @@
 /*----------------------------------------------------------------------------------*/
-/*--------------------------------- hero-div.scss -----------------------------------*/
+/*--------------------------------- hero-div.scss ----------------------------------*/
 /*----------------------------------------------------------------------------------*/
+@use "mixins/hero";
+
 .hero {
   > div {
-    display: flex;
-    flex-direction: var(--hero-content-container-flex-direction);
-    justify-content: var(--hero-content-container-justify-content);
-    align-items: var(--hero-content-container-align-items);
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    padding-top: var(--hero-content-container-padding-top);
-    padding-right: var(--hero-content-container-padding-right);
-    padding-bottom: var(--hero-content-container-padding-bottom);
-    padding-left: var(--hero-content-container-padding-left);
-    z-index: 1;
+    @include hero.hero-content-container;
   }
 }
diff --git a/manon/mixins/hero.scss b/manon/mixins/hero.scss
new file mode 100644
index 00000000..33f18a50
--- /dev/null
+++ b/manon/mixins/hero.scss
@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------*/
+/*------------------------- mixins/hero.scss --------------------------*/
+/*---------------------------------------------------------------------*/
+
+@mixin hero-content-container {
+  & {
+    display: flex;
+    flex-direction: var(--hero-content-container-flex-direction);
+    justify-content: var(--hero-content-container-justify-content);
+    align-items: var(--hero-content-container-align-items);
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-top: var(--hero-content-container-padding-top);
+    padding-right: var(--hero-content-container-padding-right);
+    padding-bottom: var(--hero-content-container-padding-bottom);
+    padding-left: var(--hero-content-container-padding-left);
+    z-index: 1;
+  }
+}