diff --git a/package.json b/package.json
index 3671dd98..5e0817c3 100644
--- a/package.json
+++ b/package.json
@@ -50,8 +50,8 @@
     "postcss-scss": "^4.0.6",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^2.2.1",
-    "sass": "^1.52.3",
-    "sass-loader": "^11.0.1",
+    "sass": "^1.85.1",
+    "sass-loader": "^16.0.5",
     "sharp": "^0.32.1",
     "style-loader": "^2.0.0",
     "stylelint": "^14.13.0",
diff --git a/src/scss/01-abstract/_variables.scss b/src/scss/01-abstract/_variables.scss
index cf98840c..5a98947b 100644
--- a/src/scss/01-abstract/_variables.scss
+++ b/src/scss/01-abstract/_variables.scss
@@ -1,6 +1,8 @@
 @use "sass:map";
 @use "sass:math";
 
+$entry-file-name: "undefined";
+
 /**
  * Variables
  */
diff --git a/src/scss/01-abstract/abstract.scss b/src/scss/01-abstract/abstract.scss
deleted file mode 100644
index 398847bc..00000000
--- a/src/scss/01-abstract/abstract.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "./constants";
-@import "./variables";
diff --git a/src/scss/02-tools/_f-column.scss b/src/scss/02-tools/_f-column.scss
index 8ddb7f2b..f5c42cea 100644
--- a/src/scss/02-tools/_f-column.scss
+++ b/src/scss/02-tools/_f-column.scss
@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "../01-abstract/variables" as *;
+
 @use "sass:map";
 @use "sass:math";
 
@@ -68,7 +71,7 @@
 
 @function column($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) {
     // shift vars if $device is number
-    @if type-of($device) == "number" {
+    @if meta.type-of($device) == "number" {
         $total-gutter: $total-column;
         $total-column: $nb-gutter;
         $nb-gutter: $nb-column;
@@ -98,7 +101,7 @@
 
 @function column-px($device, $nb-column: null, $nb-gutter: null, $unitless: false) {
     // shift vars if $device is number
-    @if type-of($device) == "number" {
+    @if meta.type-of($device) == "number" {
         $nb-gutter: $nb-column;
         $nb-column: $device;
         $device: d;
@@ -125,7 +128,7 @@
 
 @function column-full($device, $nb-column: null, $nb-gutter: null) {
     // shift vars if $device is number
-    @if type-of($device) == "number" {
+    @if meta.type-of($device) == "number" {
         $nb-gutter: $nb-column;
         $nb-column: $device;
         $device: d;
diff --git a/src/scss/02-tools/_f-context-align.scss b/src/scss/02-tools/_f-context-align.scss
index cec4c732..ecda8724 100644
--- a/src/scss/02-tools/_f-context-align.scss
+++ b/src/scss/02-tools/_f-context-align.scss
@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 /**
  * Align - Make a context align (editor / style)
  *
diff --git a/src/scss/02-tools/_f-context-selector.scss b/src/scss/02-tools/_f-context-selector.scss
index 1c8b91d3..361ffc5d 100644
--- a/src/scss/02-tools/_f-context-selector.scss
+++ b/src/scss/02-tools/_f-context-selector.scss
@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "../01-abstract/variables" as *;
+
 /**
  * Context selector - Make a context selector (editor / style)
  *
@@ -61,9 +64,9 @@
         @return $selector;
     }
 
-    @if (type-of($selector) == "string") {
+    @if (meta.type-of($selector) == "string") {
         $full-selector: $parent + " " + $selector;
-    } @else if (type-of($selector) == "list") {
+    } @else if (meta.type-of($selector) == "list") {
         @each $s in $selector {
             $full-selector: $full-selector + $parent + " " + $s;
         }
diff --git a/src/scss/02-tools/_f-em.scss b/src/scss/02-tools/_f-em.scss
index 4622fb79..1c5f5f3c 100644
--- a/src/scss/02-tools/_f-em.scss
+++ b/src/scss/02-tools/_f-em.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "f-strip-units" as *;
+
 @use "sass:math";
 
 /**
@@ -22,11 +25,11 @@
 
 @function em($pxval, $base: $font-size-base) {
 
-    @if not unitless($pxval) {
+    @if not math.is-unitless($pxval) {
         $pxval: strip-units($pxval);
     }
 
-    @if not unitless($base) {
+    @if not math.is-unitless($base) {
         $base: strip-units($base);
     }
 
diff --git a/src/scss/02-tools/_f-fluid-size.scss b/src/scss/02-tools/_f-fluid-size.scss
index 1b797bf4..f97acf8e 100644
--- a/src/scss/02-tools/_f-fluid-size.scss
+++ b/src/scss/02-tools/_f-fluid-size.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "f-strip-units" as *;
+
 /**
  * Fluid size
  *
diff --git a/src/scss/02-tools/_f-get-gutter-width.scss b/src/scss/02-tools/_f-get-gutter-width.scss
index 48cef979..98580b19 100644
--- a/src/scss/02-tools/_f-get-gutter-width.scss
+++ b/src/scss/02-tools/_f-get-gutter-width.scss
@@ -1,3 +1,4 @@
+@use "../01-abstract/variables" as *;
 @use "sass:map";
 
 /**
diff --git a/src/scss/02-tools/_f-get-svg-url.scss b/src/scss/02-tools/_f-get-svg-url.scss
index da25dce2..e0456fa5 100644
--- a/src/scss/02-tools/_f-get-svg-url.scss
+++ b/src/scss/02-tools/_f-get-svg-url.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "sass:color";
+@use "sass:list";
 @use "sass:map";
 
 /**
@@ -40,7 +43,7 @@
         "close": ("0 0 20 20", "3Cpath d='M5.442 5.442 5 5.883l2.058 2.059L9.116 10l-2.058 2.058L5 14.117l.442.441.441.442 2.059-2.058L10 10.884l2.058 2.058L14.117 15l.441-.442.442-.441-2.058-2.059L10.884 10l2.058-2.058L15 5.883l-.442-.441L14.117 5l-2.059 2.058L10 9.116 7.942 7.058 5.883 5l-.441.442'/%3E"),
     );
 
-    @if not map-has-key($svgs, $name) {
+    @if not map.has-key($svgs, $name) {
         @return "";
     }
 
@@ -49,8 +52,8 @@
     }
 
     @if ($fill != "") {
-        $fill: " fill='rgba(#{red($fill), green($fill), blue($fill), $opacity})'";
+        $fill: " fill='rgba(#{color.channel($fill, 'red'), color.channel($fill, 'green'), color.channel($fill, 'blue'), $opacity})'";
     }
 
-    @return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + nth(map.get($svgs, $name), 1) + "'%3E%" + nth(map.get($svgs, $name), 2) + "%3C/svg%3E");  /* stylelint-disable-line */
+    @return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + list.nth(map.get($svgs, $name), 1) + "'%3E%" + list.nth(map.get($svgs, $name), 2) + "%3C/svg%3E");  /* stylelint-disable-line */
 }
diff --git a/src/scss/02-tools/_m-bg-fullwidth.scss b/src/scss/02-tools/_m-bg-fullwidth.scss
index 5bf20e9e..dd0ae202 100644
--- a/src/scss/02-tools/_m-bg-fullwidth.scss
+++ b/src/scss/02-tools/_m-bg-fullwidth.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "m-style-only" as *;
+
 /**
  * Background fullwidth - Make a fullwidth background in a container element
  *
diff --git a/src/scss/02-tools/_m-block-vertical-spacing.scss b/src/scss/02-tools/_m-block-vertical-spacing.scss
index b6ee5832..fee401cc 100644
--- a/src/scss/02-tools/_m-block-vertical-spacing.scss
+++ b/src/scss/02-tools/_m-block-vertical-spacing.scss
@@ -1,3 +1,5 @@
+@use "f-context-selector";
+
 /**
  * Block vertical spacing
  */
@@ -22,7 +24,7 @@
  *
  */
 @mixin block-vertical-spacing($type : margin, $spacing : var(--spacing--block-3)) {
-    #{context-selector(".blocks-container > &", ".is-root-container > &, .is-root-container > .wp-block[data-align] > &, .is-root-container > .acf-block-preview > &, .is-root-container > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block-beapi-manual-block &, .is-root-container > .wp-block[data-align] > .acf-block-preview > &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-manual-block &")} {
+    #{f-context-selector.context-selector(".blocks-container > &", ".is-root-container > &, .is-root-container > .wp-block[data-align] > &, .is-root-container > .acf-block-preview > &, .is-root-container > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block-beapi-manual-block &, .is-root-container > .wp-block[data-align] > .acf-block-preview > &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-manual-block &")} {
         #{$type}-top: $spacing;
         #{$type}-bottom: $spacing;
 
diff --git a/src/scss/02-tools/_m-breakpoint.scss b/src/scss/02-tools/_m-breakpoint.scss
index 3b99c70e..b1644d23 100644
--- a/src/scss/02-tools/_m-breakpoint.scss
+++ b/src/scss/02-tools/_m-breakpoint.scss
@@ -1,3 +1,7 @@
+@use "sass:meta";
+@use "../01-abstract/variables" as *;
+@use "f-em" as *;
+
 @use "sass:map";
 
 /**
@@ -24,7 +28,7 @@
 @mixin breakpoints($breakpoint, $min-or-max-or-breakpoint: min) {
     $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified
 
-    @if (type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") {
+    @if (meta.type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") {
 
         @media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) and (max-width: em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) {
             @content;
diff --git a/src/scss/02-tools/_m-btn.scss b/src/scss/02-tools/_m-btn.scss
index bb464bcc..934d4114 100644
--- a/src/scss/02-tools/_m-btn.scss
+++ b/src/scss/02-tools/_m-btn.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "m-hover" as *;
+
 /**
  * Button - All mixins for buttons - Used in src/scss/05-components/_btn.scss
  *
diff --git a/src/scss/02-tools/_m-checkbox-custom.scss b/src/scss/02-tools/_m-checkbox-custom.scss
index 3fc8e849..45d8d890 100644
--- a/src/scss/02-tools/_m-checkbox-custom.scss
+++ b/src/scss/02-tools/_m-checkbox-custom.scss
@@ -1,3 +1,7 @@
+@use "../01-abstract/variables" as *;
+@use "m-rtl" as *;
+@use "m-sr-only" as *;
+
 @use "sass:math";
 
 /**
diff --git a/src/scss/02-tools/_m-container-query.scss b/src/scss/02-tools/_m-container-query.scss
index d8d9669c..e2a4b1f7 100644
--- a/src/scss/02-tools/_m-container-query.scss
+++ b/src/scss/02-tools/_m-container-query.scss
@@ -1,3 +1,7 @@
+@use "sass:meta";
+@use "../01-abstract/variables" as *;
+@use "f-em" as *;
+
 @use "sass:map";
 
 /**
@@ -25,7 +29,7 @@
 @mixin container-query($breakpoint, $min-or-max-or-breakpoint: min, $container-name: "") {
     $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified
 
-    @if (type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") {
+    @if (meta.type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") {
 
         @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) and (max-width: #{em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) {
 
diff --git a/src/scss/02-tools/_m-container.scss b/src/scss/02-tools/_m-container.scss
index 88258062..e3eef693 100644
--- a/src/scss/02-tools/_m-container.scss
+++ b/src/scss/02-tools/_m-container.scss
@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 /**
  * Container
  *
diff --git a/src/scss/02-tools/_m-editor-only.scss b/src/scss/02-tools/_m-editor-only.scss
index dd1d273f..1348832e 100644
--- a/src/scss/02-tools/_m-editor-only.scss
+++ b/src/scss/02-tools/_m-editor-only.scss
@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 /**
  * Editor style only
  *
diff --git a/src/scss/02-tools/_m-heading.scss b/src/scss/02-tools/_m-heading.scss
index 1341158e..e3b57137 100644
--- a/src/scss/02-tools/_m-heading.scss
+++ b/src/scss/02-tools/_m-heading.scss
@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 /**
  * Heading - Used in src/scss/06-blocks/core/_heading.scss
  *
diff --git a/src/scss/02-tools/_m-hover.scss b/src/scss/02-tools/_m-hover.scss
index b549ca64..c3e60c79 100644
--- a/src/scss/02-tools/_m-hover.scss
+++ b/src/scss/02-tools/_m-hover.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "sass:list";
 
 /**
@@ -44,10 +45,10 @@
     $selectors: "&:hover", "&:active", "&:focus";
 
     @if ($additionalSelectors) {
-        @if (type-of($additionalSelectors) == "string") {
+        @if (meta.type-of($additionalSelectors) == "string") {
             $selectors: $selectors "," $additionalSelectors;
         }
-        @else if (type-of($additionalSelectors) == "list") {
+        @else if (meta.type-of($additionalSelectors) == "list") {
             $selectors: list.join($selectors, $additionalSelectors, comma);
         }
     }
diff --git a/src/scss/02-tools/_m-not-acf.scss b/src/scss/02-tools/_m-not-acf.scss
index 4a99f4e6..06b51057 100644
--- a/src/scss/02-tools/_m-not-acf.scss
+++ b/src/scss/02-tools/_m-not-acf.scss
@@ -1,3 +1,5 @@
+@use "f-context-selector";
+
 /**
  * Not apply style to ACF fields
  *
@@ -14,7 +16,7 @@
  */
 
 @mixin not-acf() {
-    #{context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} {
+    #{f-context-selector.context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} {
         @content;
     }
 }
diff --git a/src/scss/02-tools/_m-radio-custom.scss b/src/scss/02-tools/_m-radio-custom.scss
index 8d1478e8..97b899d1 100644
--- a/src/scss/02-tools/_m-radio-custom.scss
+++ b/src/scss/02-tools/_m-radio-custom.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "m-checkbox-custom";
+
 @use "sass:math";
 
 /**
@@ -28,7 +31,7 @@
 
 @mixin radio-custom($include-checkbox-style: false, $color: $color-primary, $size: 18px, $border-width: 1px) {
     @if ($include-checkbox-style) {
-        @include checkbox-custom($color, $size, $border-width);
+        @include m-checkbox-custom.checkbox-custom($color, $size, $border-width);
     }
 
     + label {
@@ -48,5 +51,5 @@
 }
 
 @mixin radio-custom-checked() {
-    @include checkbox-custom-checked;
+    @include m-checkbox-custom.checkbox-custom-checked;
 }
diff --git a/src/scss/02-tools/_m-scrollbar.scss b/src/scss/02-tools/_m-scrollbar.scss
index 01ff74f3..08fe5df7 100644
--- a/src/scss/02-tools/_m-scrollbar.scss
+++ b/src/scss/02-tools/_m-scrollbar.scss
@@ -1,3 +1,5 @@
+@use "m-hover";
+
 /**
  * Scrollbar - Make an invisible scrollbar and custom the scrollbar color
  *
@@ -55,7 +57,7 @@
         border-radius: 20px;
     }
 
-    @include hover {
+    @include m-hover.hover {
         &::-webkit-scrollbar {
             display: block;
         }
diff --git a/src/scss/02-tools/_m-select-custom.scss b/src/scss/02-tools/_m-select-custom.scss
index 2b5ef9ea..026afc47 100644
--- a/src/scss/02-tools/_m-select-custom.scss
+++ b/src/scss/02-tools/_m-select-custom.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "f-get-svg-url" as *;
+@use "m-rtl" as *;
 @use "sass:color";
 
 /**
diff --git a/src/scss/02-tools/_m-style-only.scss b/src/scss/02-tools/_m-style-only.scss
index 69a34dca..dc777104 100644
--- a/src/scss/02-tools/_m-style-only.scss
+++ b/src/scss/02-tools/_m-style-only.scss
@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 /**
  * Style for Frontend UI only
  *
diff --git a/src/scss/02-tools/_m-text-icon.scss b/src/scss/02-tools/_m-text-icon.scss
index 10b21752..c3e916a1 100644
--- a/src/scss/02-tools/_m-text-icon.scss
+++ b/src/scss/02-tools/_m-text-icon.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/constants" as *;
+@use "f-get-svg-url" as *;
+
 /**
  * Add icon before text with mask to have the same color of the text
  *
diff --git a/src/scss/02-tools/tools.scss b/src/scss/02-tools/tools.scss
deleted file mode 100644
index b2a540e4..00000000
--- a/src/scss/02-tools/tools.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Abstract folder entry file
- */
-
-@import "./f-assign-inputs";
-@import "./f-column";
-@import "./f-context-align";
-@import "./f-context-selector";
-@import "./f-easings";
-@import "./f-em";
-@import "./f-get-gutter-width";
-@import "./f-get-svg-url";
-@import "./f-strip-units";
-@import "./f-fluid-size";
-@import "./m-align";
-@import "./m-autofill";
-@import "./m-breakpoint";
-@import "./m-btn";
-@import "./m-checkbox-custom";
-@import "./m-container";
-@import "./m-container-query";
-@import "./m-declare-font-face";
-@import "./m-editor-only";
-@import "./m-heading";
-@import "./m-hover";
-@import "./m-line-clamp";
-@import "./m-placeholder-media";
-@import "./m-radio-custom";
-@import "./m-row-fullwidth";
-@import "./m-scrollbar";
-@import "./m-select-custom";
-@import "./m-sr-only";
-@import "./m-style-only";
-@import "./m-reduced-motion";
-@import "./m-bg-fullwidth";
-@import "./m-block-vertical-spacing";
-@import "./m-background-static";
-@import "./m-not-acf";
-@import "./m-rtl";
-@import "./m-text";
-@import "./m-text-icon";
diff --git a/src/scss/03-base/_body.scss b/src/scss/03-base/_body.scss
index 6af8bb46..dcd662ed 100644
--- a/src/scss/03-base/_body.scss
+++ b/src/scss/03-base/_body.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "../02-tools/m-rtl" as *;
+
 html {
     /* Set automatic RTL direction depending on lang attribute */
     @include set-rtl-direction;
diff --git a/src/scss/03-base/_fonts.scss b/src/scss/03-base/_fonts.scss
index b5e77e7a..674dd2b9 100644
--- a/src/scss/03-base/_fonts.scss
+++ b/src/scss/03-base/_fonts.scss
@@ -25,7 +25,7 @@
  *          ...
  */
 
-@use "~@fontsource/poppins/scss/mixins" as Poppins;
+@use "../../../node_modules/@fontsource/poppins/scss/mixins" as Poppins;
 
 @include Poppins.faces($weights: (300, 400, 500, 700), $styles: normal);
 @include Poppins.faces($weights: (300, 400, 500, 700), $styles: italic);
diff --git a/src/scss/03-base/_forms.scss b/src/scss/03-base/_forms.scss
index fb124761..d6b2c8ec 100644
--- a/src/scss/03-base/_forms.scss
+++ b/src/scss/03-base/_forms.scss
@@ -1,3 +1,12 @@
+@use "../01-abstract/variables" as *;
+@use "../02-tools/f-assign-inputs" as *;
+@use "../02-tools/f-get-svg-url" as *;
+@use "../02-tools/m-checkbox-custom" as *;
+@use "../02-tools/m-not-acf" as *;
+@use "../02-tools/m-radio-custom" as *;
+@use "../02-tools/m-select-custom" as *;
+@use "../05-components/btn";
+
 @use "sass:color";
 
 // All inputs variables
diff --git a/src/scss/03-base/_links.scss b/src/scss/03-base/_links.scss
index f25b2fe5..a842168a 100644
--- a/src/scss/03-base/_links.scss
+++ b/src/scss/03-base/_links.scss
@@ -1,10 +1,13 @@
+@use "../02-tools/m-hover" as *;
+@use "../02-tools/m-text-icon" as *;
+
 a {
     color: currentColor;
     text-decoration: underline;
     cursor: pointer;
 
     &[target="_blank"] {
-        @include text-external-icon;
+        @include text-icon("external");
     }
 
     @include hover {
@@ -13,5 +16,5 @@ a {
 }
 
 .link-external {
-    @include text-external-icon;
+    @include text-icon("external");
 }
diff --git a/src/scss/03-base/_print.scss b/src/scss/03-base/_print.scss
index dbc8c65a..9cf87883 100644
--- a/src/scss/03-base/_print.scss
+++ b/src/scss/03-base/_print.scss
@@ -1,3 +1,5 @@
+@use "../01-abstract/variables" as *;
+
 @media print {
     * {
         font-family: Arial, Helvetica, sans-serif !important;
diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss
index ba475ff3..ac487c81 100644
--- a/src/scss/03-base/_variables-css.scss
+++ b/src/scss/03-base/_variables-css.scss
@@ -1,3 +1,8 @@
+@use "../01-abstract/variables" as *;
+@use "../02-tools/f-fluid-size" as *;
+@use "../02-tools/m-breakpoint" as *;
+@use "../02-tools/m-reduced-motion" as *;
+
 :root {
     /*
      * Heading
diff --git a/src/scss/03-base/base.scss b/src/scss/03-base/base.scss
deleted file mode 100644
index b09c00ad..00000000
--- a/src/scss/03-base/base.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Base folder entry file
- */
-
-@import "./fonts";
-@import "./variables-css";
-@import "./normalize";
-@import "./body";
-@import "./svg-icons";
-@import "./forms";
-@import "./links";
-@import "./media";
-@import "./text";
-@import "./print";
diff --git a/src/scss/04-utilities/_container.scss b/src/scss/04-utilities/_container.scss
index c10d2f52..40c26d01 100644
--- a/src/scss/04-utilities/_container.scss
+++ b/src/scss/04-utilities/_container.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "../02-tools/m-container" as *;
+
 /* Main Layout */
 .container,
 .container-wide {
diff --git a/src/scss/04-utilities/_focus.scss b/src/scss/04-utilities/_focus.scss
index 82747d14..9100934e 100644
--- a/src/scss/04-utilities/_focus.scss
+++ b/src/scss/04-utilities/_focus.scss
@@ -11,14 +11,3 @@ html {
         }
     }
 }
-
-%focus-seo-container {
-    &:has(:focus-visible) {
-        outline: 2px solid currentColor;
-        outline-offset: .5rem;
-    }
-
-    *:focus {
-        outline: none;
-    }
-}
diff --git a/src/scss/04-utilities/_js-animation.scss b/src/scss/04-utilities/_js-animation.scss
index db2ef44b..0adc6791 100644
--- a/src/scss/04-utilities/_js-animation.scss
+++ b/src/scss/04-utilities/_js-animation.scss
@@ -1,3 +1,5 @@
+@use "../01-abstract/constants" as *;
+
 /**
  * js-animation
  *
diff --git a/src/scss/04-utilities/_lazyload.scss b/src/scss/04-utilities/_lazyload.scss
index df725030..c2a4753e 100644
--- a/src/scss/04-utilities/_lazyload.scss
+++ b/src/scss/04-utilities/_lazyload.scss
@@ -1,3 +1,4 @@
+@use "../01-abstract/variables" as *;
 @use "sass:math";
 
 .lazyload,
diff --git a/src/scss/04-utilities/_palette.scss b/src/scss/04-utilities/_palette.scss
index 26f4426a..736a6944 100644
--- a/src/scss/04-utilities/_palette.scss
+++ b/src/scss/04-utilities/_palette.scss
@@ -1,3 +1,4 @@
+@use "../01-abstract/variables" as *;
 @use "sass:map";
 
 @each $name, $colors in $palette {
diff --git a/src/scss/04-utilities/_seo.scss b/src/scss/04-utilities/_seo.scss
index 7d3aedd5..1972f556 100644
--- a/src/scss/04-utilities/_seo.scss
+++ b/src/scss/04-utilities/_seo.scss
@@ -1,3 +1,14 @@
+%focus-seo-container {
+    &:has(:focus-visible) {
+        outline: 2px solid currentColor;
+        outline-offset: .5rem;
+    }
+
+    *:focus {
+        outline: none;
+    }
+}
+
 %seo-container {
     @extend %focus-seo-container;
     position: relative;
diff --git a/src/scss/04-utilities/_sr-only.scss b/src/scss/04-utilities/_sr-only.scss
index 856fb6bb..e8962007 100644
--- a/src/scss/04-utilities/_sr-only.scss
+++ b/src/scss/04-utilities/_sr-only.scss
@@ -1,3 +1,5 @@
+@use "../02-tools/m-sr-only" as *;
+
 %sr-only {
     @include sr-only;
 }
diff --git a/src/scss/04-utilities/_wp-admin-bar.scss b/src/scss/04-utilities/_wp-admin-bar.scss
index b09db67a..3062aa92 100644
--- a/src/scss/04-utilities/_wp-admin-bar.scss
+++ b/src/scss/04-utilities/_wp-admin-bar.scss
@@ -1,3 +1,5 @@
+@use "../02-tools/m-breakpoint" as *;
+
 #wpadminbar {
     @include breakpoints(sm, max) {
         overflow: scroll;
diff --git a/src/scss/04-utilities/utilities.scss b/src/scss/04-utilities/utilities.scss
deleted file mode 100644
index a86ff752..00000000
--- a/src/scss/04-utilities/utilities.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "./wp-admin-bar";
-@import "./focus";
-@import "./lazyload";
-@import "./seo";
-@import "./video-wrapper";
-@import "./palette";
-@import "./container";
-@import "./sr-only";
-@import "./js-animation";
-@import "./aria";
diff --git a/src/scss/05-components/_btn.scss b/src/scss/05-components/_btn.scss
index 65ba6377..ba10c974 100644
--- a/src/scss/05-components/_btn.scss
+++ b/src/scss/05-components/_btn.scss
@@ -1,3 +1,5 @@
+@use "../02-tools/m-btn" as *;
+
 %btn {
     @include btn;
 }
diff --git a/src/scss/05-components/_skip-links.scss b/src/scss/05-components/_skip-links.scss
index 9a96aae0..33d67a4a 100644
--- a/src/scss/05-components/_skip-links.scss
+++ b/src/scss/05-components/_skip-links.scss
@@ -1,3 +1,6 @@
+@use "../01-abstract/constants" as *;
+@use "../01-abstract/variables" as *;
+
 .skip-links {
     position: fixed;
     top: var(--wp-admin-bar-height);
diff --git a/src/scss/05-components/components.scss b/src/scss/05-components/components.scss
deleted file mode 100644
index 436e5ae0..00000000
--- a/src/scss/05-components/components.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Elements folder entry file
- */
-
-@import "./btn";
-@import "./searchform";
-@import "./skip-links";
diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss
index 7dc34fe0..f05ff73a 100644
--- a/src/scss/06-blocks/_gutenberg.scss
+++ b/src/scss/06-blocks/_gutenberg.scss
@@ -1,3 +1,10 @@
+@use "../01-abstract/variables" as *;
+@use "../02-tools/f-context-selector" as *;
+@use "../02-tools/f-get-gutter-width" as *;
+@use "../02-tools/m-align" as *;
+@use "../02-tools/m-editor-only" as *;
+@use "../02-tools/m-heading" as *;
+
 @include editor-only {
     // ----
     // Post title style
@@ -58,6 +65,30 @@
         margin-left: auto;
     }
 
+    @include editor-only {
+        > .wp-block[class*="wp-block-acf"],
+        > .wp-block[class*="wp-block-beapi-manual-block"],
+        > .wp-block[class*="wp-block-beapi-dynamic-block"] {
+            width: 100%;
+            max-width: none;
+        }
+
+        > .wp-block[class*="wp-block-acf"].is-selected {
+            width: #{$container-wide};
+            max-width: var(--responsive--alignwide-width);
+        }
+
+        // The template block must have a ".block" class. Example : <div class="block block--my-custom-block">
+        > :where(.wp-block[class*="wp-block-acf"]) :where(.block),
+        > :where(.wp-block[class*="wp-block-beapi-manual-block"]) :where(.block),
+        > :where(.wp-block[class*="wp-block-beapi-dynamic-block"]) :where(.block) {
+            width: $container-default;
+            max-width: var(--responsive--aligndefault-width);
+            margin-right: auto;
+            margin-left: auto;
+        }
+    }
+
     #{context-selector(".alignwide", "[data-align='wide']")} {
         width: #{$container-wide};
         max-width: var(--responsive--alignwide-width);
diff --git a/src/scss/06-blocks/blocks.scss b/src/scss/06-blocks/blocks.scss
deleted file mode 100644
index bd90a76a..00000000
--- a/src/scss/06-blocks/blocks.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Blocks
-// - These styles replace key Gutenberg Block styles with font, color, and
-//   spacing with CSS-variables overrides
-// - In the future the Block styles may get compiled to individual .css
-//   files and conditionally loaded
-
-@import "./core/audio";
-@import "./core/buttons";
-@import "./core/code";
-@import "./core/columns";
-@import "./core/cover";
-@import "./core/file";
-@import "./core/freeform";
-@import "./core/gallery";
-@import "./core/group";
-@import "./core/heading";
-@import "./core/image";
-@import "./core/list";
-@import "./core/media-text";
-@import "./core/paragraph";
-@import "./core/preformatted";
-@import "./core/pullquote";
-@import "./core/quote";
-@import "./core/separator";
-@import "./core/search";
-@import "./core/spacer";
-@import "./core/table";
-@import "./core/video";
diff --git a/src/scss/06-blocks/core/_audio.scss b/src/scss/06-blocks/core/_audio.scss
index d0c76ab9..dfddf360 100644
--- a/src/scss/06-blocks/core/_audio.scss
+++ b/src/scss/06-blocks/core/_audio.scss
@@ -1,3 +1,5 @@
+@use "../../01-abstract/variables" as *;
+
 .wp-block-audio {
     audio {
         &::-webkit-media-controls-panel {
diff --git a/src/scss/06-blocks/core/_buttons.scss b/src/scss/06-blocks/core/_buttons.scss
index 92fa30ab..e0dd6c9a 100644
--- a/src/scss/06-blocks/core/_buttons.scss
+++ b/src/scss/06-blocks/core/_buttons.scss
@@ -1,3 +1,5 @@
+@use "../../05-components/btn";
+
 .wp-block {
     // ----
     // container
diff --git a/src/scss/06-blocks/core/_columns.scss b/src/scss/06-blocks/core/_columns.scss
index cbde4b1e..5ee1ee58 100644
--- a/src/scss/06-blocks/core/_columns.scss
+++ b/src/scss/06-blocks/core/_columns.scss
@@ -1,3 +1,6 @@
+@use "../../02-tools/m-block-vertical-spacing" as *;
+@use "../../02-tools/m-breakpoint" as *;
+
 .wp-block-columns {
     --wp-block-columns-row-gap: var(--spacing--block-2);
     --wp-block-columns-column-gap: #{get_gutter-width()};
diff --git a/src/scss/06-blocks/core/_cover.scss b/src/scss/06-blocks/core/_cover.scss
index c822270d..6331ed44 100644
--- a/src/scss/06-blocks/core/_cover.scss
+++ b/src/scss/06-blocks/core/_cover.scss
@@ -1,3 +1,6 @@
+@use "../../02-tools/m-editor-only" as *;
+@use "../../02-tools/m-style-only" as *;
+
 .wp-block-cover,
 .wp-block-cover-image {
     &:not(.alignwide):not(.alignfull) {
diff --git a/src/scss/06-blocks/core/_file.scss b/src/scss/06-blocks/core/_file.scss
index ec51aac2..8e8403f8 100644
--- a/src/scss/06-blocks/core/_file.scss
+++ b/src/scss/06-blocks/core/_file.scss
@@ -1,3 +1,5 @@
+@use "../../05-components/btn";
+
 .wp-block-file {
     $el: &;
 
diff --git a/src/scss/06-blocks/core/_freeform.scss b/src/scss/06-blocks/core/_freeform.scss
index 6d1f5848..e73152eb 100644
--- a/src/scss/06-blocks/core/_freeform.scss
+++ b/src/scss/06-blocks/core/_freeform.scss
@@ -1,3 +1,6 @@
+@use "../../01-abstract/variables" as *;
+@use "../../02-tools/m-editor-only" as *;
+
 .wp-block-freeform {
     @include editor-only {
         // Remove the border of blockquotes inside the classic block.
diff --git a/src/scss/06-blocks/core/_gallery.scss b/src/scss/06-blocks/core/_gallery.scss
index 75a7afaa..e1a4c4fb 100644
--- a/src/scss/06-blocks/core/_gallery.scss
+++ b/src/scss/06-blocks/core/_gallery.scss
@@ -1,3 +1,5 @@
+@use "../../02-tools/f-get-gutter-width" as *;
+
 .wp-block-gallery {
     --wp--style--gallery-gap-default: #{get-gutter-width()} !important;
 }
diff --git a/src/scss/06-blocks/core/_group.scss b/src/scss/06-blocks/core/_group.scss
index 03878e2c..2709b959 100644
--- a/src/scss/06-blocks/core/_group.scss
+++ b/src/scss/06-blocks/core/_group.scss
@@ -1,3 +1,6 @@
+@use "../../02-tools/m-breakpoint" as *;
+@use "../../02-tools/m-editor-only" as *;
+
 .wp-block-group {
     $el: &;
 
diff --git a/src/scss/06-blocks/core/_heading.scss b/src/scss/06-blocks/core/_heading.scss
index 47b388ba..4f906c69 100644
--- a/src/scss/06-blocks/core/_heading.scss
+++ b/src/scss/06-blocks/core/_heading.scss
@@ -1,3 +1,5 @@
+@use "../../02-tools/m-heading" as *;
+
 /**
  * Headings
  *
diff --git a/src/scss/06-blocks/core/_image.scss b/src/scss/06-blocks/core/_image.scss
index cab35af6..3959134d 100644
--- a/src/scss/06-blocks/core/_image.scss
+++ b/src/scss/06-blocks/core/_image.scss
@@ -1,3 +1,5 @@
+@use "../../01-abstract/variables" as *;
+
 .wp-block-image {
     > img {
         max-width: 100%;
diff --git a/src/scss/06-blocks/core/_list.scss b/src/scss/06-blocks/core/_list.scss
index 2b7746f5..7a581bfe 100644
--- a/src/scss/06-blocks/core/_list.scss
+++ b/src/scss/06-blocks/core/_list.scss
@@ -1,3 +1,7 @@
+@use "../../01-abstract/variables" as *;
+@use "../../02-tools/f-context-selector" as *;
+@use "../../02-tools/m-rtl" as *;
+
 // Use the no-list-style class in your theme if you want the basic style
 
 %marker-ol-default {
@@ -23,7 +27,7 @@
     }
 }
 
-#{context-selector('.blocks-container', '.is-root-container')} {
+#{context-selector(".blocks-container", ".is-root-container")} {
     --offset-item: 30px;
     --vertical-spaging-item: 16px;
 
diff --git a/src/scss/06-blocks/core/_media-text.scss b/src/scss/06-blocks/core/_media-text.scss
index efd47a97..86417a4e 100644
--- a/src/scss/06-blocks/core/_media-text.scss
+++ b/src/scss/06-blocks/core/_media-text.scss
@@ -1,3 +1,7 @@
+@use "../../02-tools/m-editor-only" as *;
+@use "../../02-tools/m-rtl" as *;
+@use "../../02-tools/m-style-only" as *;
+
 .wp-block-media-text {
     @include rtl {
         direction: rtl; // Force direction RTL, because WP force LTR direction on RTL view
diff --git a/src/scss/06-blocks/core/_paragraph.scss b/src/scss/06-blocks/core/_paragraph.scss
index b408979b..998df4d7 100644
--- a/src/scss/06-blocks/core/_paragraph.scss
+++ b/src/scss/06-blocks/core/_paragraph.scss
@@ -1,3 +1,5 @@
+@use "../../02-tools/m-text" as *;
+
 $paragraphs: "default", "small", "large", "huge";
 
 p {
diff --git a/src/scss/06-blocks/core/_preformatted.scss b/src/scss/06-blocks/core/_preformatted.scss
index 3ec6b650..37f2b7a4 100644
--- a/src/scss/06-blocks/core/_preformatted.scss
+++ b/src/scss/06-blocks/core/_preformatted.scss
@@ -1,3 +1,6 @@
+@use "../../02-tools/m-editor-only" as *;
+@use "../../02-tools/m-style-only" as *;
+
 .wp-block-preformatted {
     overflow-x: auto;
 
diff --git a/src/scss/06-blocks/core/_search.scss b/src/scss/06-blocks/core/_search.scss
index 5002363f..785871c7 100644
--- a/src/scss/06-blocks/core/_search.scss
+++ b/src/scss/06-blocks/core/_search.scss
@@ -1,3 +1,5 @@
+@use "../../05-components/btn";
+
 .wp-block-search {
     $el: &;
 
diff --git a/src/scss/06-blocks/core/_separator.scss b/src/scss/06-blocks/core/_separator.scss
index d221bd04..8141eb38 100644
--- a/src/scss/06-blocks/core/_separator.scss
+++ b/src/scss/06-blocks/core/_separator.scss
@@ -1,3 +1,5 @@
+@use "../../02-tools/m-editor-only" as *;
+
 hr {
     margin-right: auto;
     margin-left: auto;
diff --git a/src/scss/06-blocks/core/_table.scss b/src/scss/06-blocks/core/_table.scss
index f0b6b714..effc2c9f 100644
--- a/src/scss/06-blocks/core/_table.scss
+++ b/src/scss/06-blocks/core/_table.scss
@@ -1,3 +1,5 @@
+@use "../../02-tools/m-not-acf" as *;
+
 %table {
     width: 100%;
     min-width: 240px;
diff --git a/src/scss/07-patterns/.gitkeep b/src/scss/07-patterns/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/scss/07-patterns/patterns.scss b/src/scss/07-patterns/patterns.scss
deleted file mode 100644
index 9eafdfcb..00000000
--- a/src/scss/07-patterns/patterns.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// @import "./my-pattern";
-
diff --git a/src/scss/08-template-parts/_header.scss b/src/scss/08-template-parts/_header.scss
index 26c3da95..e2e818cd 100644
--- a/src/scss/08-template-parts/_header.scss
+++ b/src/scss/08-template-parts/_header.scss
@@ -1,3 +1,10 @@
+@use "../01-abstract/constants" as *;
+@use "../01-abstract/variables" as *;
+@use "../02-tools/f-column" as *;
+@use "../02-tools/m-breakpoint" as *;
+@use "../02-tools/m-hover" as *;
+@use "../02-tools/m-rtl" as *;
+
 /**
  * Header
  */
@@ -260,7 +267,11 @@
             width: column(9);
 
             > div {
-                text-align: end;
+                text-align: right;
+
+                @include rtl {
+                    text-align: left;
+                }
             }
         }
 
@@ -275,6 +286,10 @@
                 display: inline;
                 text-align: start;
 
+                @include rtl {
+                    text-align: right;
+                }
+
                 + li {
                     margin-inline-start: 28px;
                 }
diff --git a/src/scss/08-template-parts/_hero.scss b/src/scss/08-template-parts/_hero.scss
index 6f092217..b77f2f08 100644
--- a/src/scss/08-template-parts/_hero.scss
+++ b/src/scss/08-template-parts/_hero.scss
@@ -1,3 +1,7 @@
+@use "../01-abstract/variables" as *;
+@use "../02-tools/m-breakpoint" as *;
+@use "../02-tools/m-row-fullwidth" as *;
+
 /**
  * Hero
  */
diff --git a/src/scss/08-template-parts/template-parts.scss b/src/scss/08-template-parts/template-parts.scss
deleted file mode 100644
index 1e4aafcf..00000000
--- a/src/scss/08-template-parts/template-parts.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "./header";
-@import "./footer";
-@import "./hero";
diff --git a/src/scss/09-templates/templates.scss b/src/scss/09-templates/templates.scss
deleted file mode 100644
index e9d186f8..00000000
--- a/src/scss/09-templates/templates.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "./404";
-@import "./home";
-@import "./default";
diff --git a/src/scss/10-vendor/.gitkeep b/src/scss/10-vendor/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/scss/10-vendor/vendor.scss b/src/scss/10-vendor/vendor.scss
deleted file mode 100644
index 09080ae9..00000000
--- a/src/scss/10-vendor/vendor.scss
+++ /dev/null
@@ -1 +0,0 @@
-// @import vendor styles here
diff --git a/src/scss/editor.scss b/src/scss/editor.scss
index 8365e9bc..6e86ec30 100644
--- a/src/scss/editor.scss
+++ b/src/scss/editor.scss
@@ -1,63 +1,87 @@
-$entry-file-name: "editor";
-
 /**
  * Abstract
  * == Contain SCSS and CSS variables and webfonts declarations.
  */
 
-@import "./01-abstract/abstract";
-
-/**
- * Tools
- * == Contains functions and mixins.
- */
+@use "01-abstract/constants";
+@use "01-abstract/variables";
 
-@import "./02-tools/tools";
+variables.$entry-file-name: "editor";
 
 /**
  * Base
  * == Contain generic styles such as normalize or reset.
  */
 
-@import "./03-base/fonts";
-@import "./03-base/variables-css";
-@import "./03-base/body";
-@import "./03-base/svg-icons";
-@import "./03-base/links";
-@import "./03-base/text";
+@use "03-base/fonts";
+@use "03-base/variables-css";
+@use "03-base/body";
+@use "03-base/svg-icons";
+@use "03-base/links";
+@use "03-base/text";
 
 /**
  * Utilities
  * == Utility classes that are not assigned to a specific component.
  */
 
-@import "./04-utilities/utilities";
+@use "04-utilities/wp-admin-bar";
+@use "04-utilities/focus";
+@use "04-utilities/lazyload";
+@use "04-utilities/seo";
+@use "04-utilities/video-wrapper";
+@use "04-utilities/palette";
+@use "04-utilities/container";
+@use "04-utilities/sr-only";
+@use "04-utilities/js-animation";
+@use "04-utilities/aria";
 
 /**
  * Blocks
  * == Gutenberg core blocks styles, style for front-end layout and editor.
  */
 
-@import "./05-components/btn";
+@use "05-components/btn";
 
 /**
  * Gutenberg
  * == Gutenberg core/custom blocks and patterns styles, style for front-end layout and editor.
  */
 
-@import "./06-blocks/gutenberg";
-@import "./06-blocks/blocks";
+@use "06-blocks/gutenberg";
+@use "06-blocks/core/audio";
+@use "06-blocks/core/buttons";
+@use "06-blocks/core/code";
+@use "06-blocks/core/columns";
+@use "06-blocks/core/cover";
+@use "06-blocks/core/file";
+@use "06-blocks/core/freeform";
+@use "06-blocks/core/gallery";
+@use "06-blocks/core/group";
+@use "06-blocks/core/heading";
+@use "06-blocks/core/image";
+@use "06-blocks/core/list";
+@use "06-blocks/core/media-text";
+@use "06-blocks/core/paragraph";
+@use "06-blocks/core/preformatted";
+@use "06-blocks/core/pullquote";
+@use "06-blocks/core/quote";
+@use "06-blocks/core/separator";
+@use "06-blocks/core/search";
+@use "06-blocks/core/spacer";
+@use "06-blocks/core/table";
+@use "06-blocks/core/video";
 
 /**
  * Patterns
  * == Contains styles for gutenberg patterns.
  */
 
-@import "./07-patterns/patterns";
+// @use "07-patterns/...";
 
 /**
  * Vendor
  * == Plugins or libraries custom styles.
  */
 
-@import "./10-vendor/vendor";
+// @use "10-vendor/...";
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 25fe1dd4..4ee6e41e 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,72 +1,110 @@
-$entry-file-name: "style";
-
 /**
  * Abstract
  * == Contain SCSS and CSS variables and webfonts declarations.
  */
 
-@import "./01-abstract/abstract";
-
-/**
- * Tools
- * == Contains functions and mixins.
- */
+@use "01-abstract/constants";
+@use "01-abstract/variables";
 
-@import "./02-tools/tools";
+variables.$entry-file-name: "style";
 
 /**
  * Base
  * == Contain generic styles such as normalize or reset.
  */
 
-@import "./03-base/base";
+@use "03-base/fonts";
+@use "03-base/variables-css";
+@use "03-base/normalize";
+@use "03-base/body";
+@use "03-base/svg-icons";
+@use "03-base/forms";
+@use "03-base/links";
+@use "03-base/media";
+@use "03-base/text";
+@use "03-base/print";
 
 /**
  * Utilities
  * == Utility classes that are not assigned to a specific component.
  */
 
-@import "./04-utilities/utilities";
+@use "04-utilities/wp-admin-bar";
+@use "04-utilities/focus";
+@use "04-utilities/lazyload";
+@use "04-utilities/seo";
+@use "04-utilities/video-wrapper";
+@use "04-utilities/palette";
+@use "04-utilities/container";
+@use "04-utilities/sr-only";
+@use "04-utilities/js-animation";
+@use "04-utilities/aria";
 
 /**
  * Components
  * == Contain any default component. Just give the components some basic styles.
  */
 
-@import "./05-components/components";
+@use "05-components/btn";
+@use "05-components/searchform";
+@use "05-components/skip-links";
 
 /**
  * Gutenberg
  * == Gutenberg core/custom blocks and patterns styles, style for front-end layout and editor.
  */
 
-@import "./06-blocks/gutenberg";
-@import "./06-blocks/blocks";
+@use "06-blocks/gutenberg";
+@use "06-blocks/core/audio";
+@use "06-blocks/core/buttons";
+@use "06-blocks/core/code";
+@use "06-blocks/core/columns";
+@use "06-blocks/core/cover";
+@use "06-blocks/core/file";
+@use "06-blocks/core/freeform";
+@use "06-blocks/core/gallery";
+@use "06-blocks/core/group";
+@use "06-blocks/core/heading";
+@use "06-blocks/core/image";
+@use "06-blocks/core/list";
+@use "06-blocks/core/media-text";
+@use "06-blocks/core/paragraph";
+@use "06-blocks/core/preformatted";
+@use "06-blocks/core/pullquote";
+@use "06-blocks/core/quote";
+@use "06-blocks/core/separator";
+@use "06-blocks/core/search";
+@use "06-blocks/core/spacer";
+@use "06-blocks/core/table";
+@use "06-blocks/core/video";
 
 /**
  * Patterns
  * == Contains styles for gutenberg patterns.
  */
 
-@import "./07-patterns/patterns";
+// @use "07-patterns/...";
 
 /**
  * Template parts
  * == If you want to add custom styles for specific page templates parts.
  */
 
-@import "./08-template-parts/template-parts";
+@use "08-template-parts/header";
+@use "08-template-parts/footer";
+@use "08-template-parts/hero";
 
 /**
  * Pages
  * == If you want to add custom styles for specific page templates.
  */
 
-@import "./09-templates/templates";
+@use "09-templates/home";
+@use "09-templates/default";
 
 /**
  * Vendor
  * == Plugins or libraries custom styles.
  */
 
-@import "./10-vendor/vendor";
+// @use "10-vendor/...";
diff --git a/yarn.lock b/yarn.lock
index efb2bffa..3f9572a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -574,13 +574,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.4.0, @eslint-community/regexpp@npm:^4.6.1":
+"@eslint-community/regexpp@npm:^4.4.0":
   version: 4.12.1
   resolution: "@eslint-community/regexpp@npm:4.12.1"
   checksum: 10/c08f1dd7dd18fbb60bdd0d85820656d1374dd898af9be7f82cb00451313402a22d5e30569c150315b4385907cdbca78c22389b2a72ab78883b3173be317620cc
   languageName: node
   linkType: hard
 
+"@eslint-community/regexpp@npm:^4.6.1":
+  version: 4.10.0
+  resolution: "@eslint-community/regexpp@npm:4.10.0"
+  checksum: 10/8c36169c815fc5d726078e8c71a5b592957ee60d08c6470f9ce0187c8046af1a00afbda0a065cc40ff18d5d83f82aed9793c6818f7304a74a7488dc9f3ecbd42
+  languageName: node
+  linkType: hard
+
 "@eslint/eslintrc@npm:^2.0.1, @eslint/eslintrc@npm:^2.1.4":
   version: 2.1.4
   resolution: "@eslint/eslintrc@npm:2.1.4"
@@ -1002,12 +1009,12 @@ __metadata:
   linkType: hard
 
 "@types/eslint@npm:*":
-  version: 9.6.1
-  resolution: "@types/eslint@npm:9.6.1"
+  version: 8.56.10
+  resolution: "@types/eslint@npm:8.56.10"
   dependencies:
     "@types/estree": "npm:*"
     "@types/json-schema": "npm:*"
-  checksum: 10/719fcd255760168a43d0e306ef87548e1e15bffe361d5f4022b0f266575637acc0ecb85604ac97879ee8ae83c6a6d0613b0ed31d0209ddf22a0fe6d608fc56fe
+  checksum: 10/0cdd914b944ebba51c35827d3ef95bc3e16eb82b4c2741f6437fa57cdb00a4407c77f89c220afe9e4c9566982ec8a0fb9b97c956ac3bd4623a3b6af32eed8424
   languageName: node
   linkType: hard
 
@@ -1076,11 +1083,11 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:*":
-  version: 22.14.0
-  resolution: "@types/node@npm:22.14.0"
+  version: 20.12.12
+  resolution: "@types/node@npm:20.12.12"
   dependencies:
-    undici-types: "npm:~6.21.0"
-  checksum: 10/d0669a8a37a18532c886ccfa51eb3fe1e46088deb4d3d27ebcd5d7d68bd6343ad1c7a3fcb85164780a57629359c33a6c917ecff748ea232bceac7692acc96537
+    undici-types: "npm:~5.26.4"
+  checksum: 10/e3945da0a3017bdc1f88f15bdfb823f526b2a717bd58d4640082d6eb0bd2794b5c99bfb914b9e9324ec116dce36066990353ed1c777e8a7b0641f772575793c4
   languageName: node
   linkType: hard
 
@@ -1662,7 +1669,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.4, acorn@npm:^8.11.0, acorn@npm:^8.14.0, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:^8.0.4, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+  version: 8.11.3
+  resolution: "acorn@npm:8.11.3"
+  bin:
+    acorn: bin/acorn
+  checksum: 10/b688e7e3c64d9bfb17b596e1b35e4da9d50553713b3b3630cf5690f2b023a84eac90c56851e6912b483fe60e8b4ea28b254c07e92f17ef83d72d78745a8352dd
+  languageName: node
+  linkType: hard
+
+"acorn@npm:^8.11.0, acorn@npm:^8.14.0":
   version: 8.14.1
   resolution: "acorn@npm:8.14.1"
   bin:
@@ -2124,8 +2140,8 @@ __metadata:
     postcss-scss: "npm:^4.0.6"
     postcss-sort-media-queries: "npm:^5.2.0"
     prettier: "npm:^2.2.1"
-    sass: "npm:^1.52.3"
-    sass-loader: "npm:^11.0.1"
+    sass: "npm:^1.85.1"
+    sass-loader: "npm:^16.0.5"
     sharp: "npm:^0.32.1"
     style-loader: "npm:^2.0.0"
     stylelint: "npm:^14.13.0"
@@ -2415,7 +2431,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2":
+"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.2":
   version: 1.0.2
   resolution: "call-bind-apply-helpers@npm:1.0.2"
   dependencies:
@@ -2425,6 +2441,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"call-bind-apply-helpers@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "call-bind-apply-helpers@npm:1.0.1"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    function-bind: "npm:^1.1.2"
+  checksum: 10/6e30c621170e45f1fd6735e84d02ee8e02a3ab95cb109499d5308cbe5d1e84d0cd0e10b48cc43c76aa61450ae1b03a7f89c37c10fc0de8d4998b42aab0f268cc
+  languageName: node
+  linkType: hard
+
 "call-bind@npm:^1.0.7, call-bind@npm:^1.0.8":
   version: 1.0.8
   resolution: "call-bind@npm:1.0.8"
@@ -3273,15 +3299,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.6":
-  version: 4.4.0
-  resolution: "debug@npm:4.4.0"
+"debug@npm:4, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4":
+  version: 4.3.4
+  resolution: "debug@npm:4.3.4"
   dependencies:
-    ms: "npm:^2.1.3"
+    ms: "npm:2.1.2"
   peerDependenciesMeta:
     supports-color:
       optional: true
-  checksum: 10/1847944c2e3c2c732514b93d11886575625686056cd765336212dc15de2d2b29612b6cd80e1afba767bb8e1803b778caf9973e98169ef1a24a7a7009e1820367
+  checksum: 10/0073c3bcbd9cb7d71dd5f6b55be8701af42df3e56e911186dfa46fac3a5b9eb7ce7f377dd1d3be6db8977221f8eb333d945216f645cf56f6b688cd484837d255
   languageName: node
   linkType: hard
 
@@ -3294,6 +3320,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debug@npm:^4.3.6":
+  version: 4.4.0
+  resolution: "debug@npm:4.4.0"
+  dependencies:
+    ms: "npm:^2.1.3"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10/1847944c2e3c2c732514b93d11886575625686056cd765336212dc15de2d2b29612b6cd80e1afba767bb8e1803b778caf9973e98169ef1a24a7a7009e1820367
+  languageName: node
+  linkType: hard
+
 "decamelize-keys@npm:^1.1.0":
   version: 1.1.1
   resolution: "decamelize-keys@npm:1.1.1"
@@ -4748,12 +4786,12 @@ __metadata:
   linkType: hard
 
 "follow-redirects@npm:^1.0.0":
-  version: 1.15.9
-  resolution: "follow-redirects@npm:1.15.9"
+  version: 1.15.6
+  resolution: "follow-redirects@npm:1.15.6"
   peerDependenciesMeta:
     debug:
       optional: true
-  checksum: 10/e3ab42d1097e90d28b913903841e6779eb969b62a64706a3eb983e894a5db000fbd89296f45f08885a0e54cd558ef62e81be1165da9be25a6c44920da10f424c
+  checksum: 10/70c7612c4cab18e546e36b991bbf8009a1a41cf85354afe04b113d1117569abf760269409cb3eb842d9f7b03d62826687086b081c566ea7b1e6613cf29030bf7
   languageName: node
   linkType: hard
 
@@ -4867,7 +4905,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
+"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
   version: 1.3.0
   resolution: "get-intrinsic@npm:1.3.0"
   dependencies:
@@ -4885,6 +4923,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6":
+  version: 1.2.7
+  resolution: "get-intrinsic@npm:1.2.7"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.1"
+    es-define-property: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    function-bind: "npm:^1.1.2"
+    get-proto: "npm:^1.0.0"
+    gopd: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    hasown: "npm:^2.0.2"
+    math-intrinsics: "npm:^1.1.0"
+  checksum: 10/4f7149c9a826723f94c6d49f70bcb3df1d3f9213994fab3668f12f09fa72074681460fb29ebb6f135556ec6372992d63802386098791a8f09cfa6f27090fa67b
+  languageName: node
+  linkType: hard
+
 "get-proto@npm:^1.0.0, get-proto@npm:^1.0.1":
   version: 1.0.1
   resolution: "get-proto@npm:1.0.1"
@@ -5018,18 +5074,17 @@ __metadata:
   linkType: hard
 
 "glob@npm:^10.2.2":
-  version: 10.4.5
-  resolution: "glob@npm:10.4.5"
+  version: 10.4.1
+  resolution: "glob@npm:10.4.1"
   dependencies:
     foreground-child: "npm:^3.1.0"
     jackspeak: "npm:^3.1.2"
     minimatch: "npm:^9.0.4"
     minipass: "npm:^7.1.2"
-    package-json-from-dist: "npm:^1.0.0"
     path-scurry: "npm:^1.11.1"
   bin:
     glob: dist/esm/bin.mjs
-  checksum: 10/698dfe11828b7efd0514cd11e573eaed26b2dff611f0400907281ce3eab0c1e56143ef9b35adc7c77ecc71fba74717b510c7c223d34ca8a98ec81777b293d4ac
+  checksum: 10/d7bb49d2b413f77bdd59fea4ca86dcc12450deee221af0ca93e09534b81b9ef68fe341345751d8ff0c5b54bad422307e0e44266ff8ad7fbbd0c200e8ec258b16
   languageName: node
   linkType: hard
 
@@ -5644,13 +5699,13 @@ __metadata:
   linkType: hard
 
 "immutable@npm:^5.0.2":
-  version: 5.1.1
-  resolution: "immutable@npm:5.1.1"
-  checksum: 10/7506ca692039195d1b467d68a68b39f10699940d49a737deab801d43e095eb790e931e4cf5e1fe83be8862c106406d22dfe7b0df1c2556c8f3b1e4c73c9f47bf
+  version: 5.0.3
+  resolution: "immutable@npm:5.0.3"
+  checksum: 10/9aca1c783951bb204d7036fbcefac6dd42e7c8ad77ff54b38c5fc0924e6e16ce2d123c95db47c1170ba63dd3f6fc7aa74a29be7adef984031936c4cd1e9e8554
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
+"import-fresh@npm:^3.0.0":
   version: 3.3.1
   resolution: "import-fresh@npm:3.3.1"
   dependencies:
@@ -5660,6 +5715,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "import-fresh@npm:3.3.0"
+  dependencies:
+    parent-module: "npm:^1.0.0"
+    resolve-from: "npm:^4.0.0"
+  checksum: 10/2cacfad06e652b1edc50be650f7ec3be08c5e5a6f6d12d035c440a42a8cc028e60a5b99ca08a77ab4d6b1346da7d971915828f33cdab730d3d42f08242d09baa
+  languageName: node
+  linkType: hard
+
 "import-lazy@npm:^3.1.0":
   version: 3.1.0
   resolution: "import-lazy@npm:3.1.0"
@@ -6544,13 +6609,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"klona@npm:^2.0.4":
-  version: 2.0.6
-  resolution: "klona@npm:2.0.6"
-  checksum: 10/ed7e2c9af58cb646e758e60b75dec24bf72466066290f78c515a2bae23a06fa280f11ff3210c43b94a18744954aa5358f9d46583d5e4c36da073ecc3606355c4
-  languageName: node
-  linkType: hard
-
 "known-css-properties@npm:^0.26.0":
   version: 0.26.0
   resolution: "known-css-properties@npm:0.26.0"
@@ -7233,6 +7291,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ms@npm:2.1.2":
+  version: 2.1.2
+  resolution: "ms@npm:2.1.2"
+  checksum: 10/673cdb2c3133eb050c745908d8ce632ed2c02d85640e2edb3ace856a2266a813b30c613569bf3354fdf4ea7d1a1494add3bfa95e2713baa27d0c2c71fc44f58f
+  languageName: node
+  linkType: hard
+
 "ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
@@ -7774,13 +7839,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"package-json-from-dist@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "package-json-from-dist@npm:1.0.1"
-  checksum: 10/58ee9538f2f762988433da00e26acc788036914d57c71c246bf0be1b60cdbd77dd60b6a3e1a30465f0b248aeb80079e0b34cb6050b1dfa18c06953bb1cbc7602
-  languageName: node
-  linkType: hard
-
 "param-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "param-case@npm:3.0.4"
@@ -9686,31 +9744,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass-loader@npm:^11.0.1":
-  version: 11.1.1
-  resolution: "sass-loader@npm:11.1.1"
+"sass-loader@npm:^16.0.5":
+  version: 16.0.5
+  resolution: "sass-loader@npm:16.0.5"
   dependencies:
-    klona: "npm:^2.0.4"
     neo-async: "npm:^2.6.2"
   peerDependencies:
-    fibers: ">= 3.1.0"
-    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0
+    "@rspack/core": 0.x || 1.x
+    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
     sass: ^1.3.0
+    sass-embedded: "*"
     webpack: ^5.0.0
   peerDependenciesMeta:
-    fibers:
+    "@rspack/core":
       optional: true
     node-sass:
       optional: true
     sass:
       optional: true
-  checksum: 10/3a9d09d1ea88cc29220952ff883e685e20d3e68203b5cf28fe5b7c8ee99d8685aa7d005f8b8df50f4d4ba0b33e6c91650e12b54714b3262f9a9b8ec314ffce3c
+    sass-embedded:
+      optional: true
+    webpack:
+      optional: true
+  checksum: 10/978b553900427c3fc24ed16b8258829d6a851bc5b0ab226cf43143fc08a0386e8cd07db367104d190a6cf0945af071805f70773525a970673c5b61fda4b7a59e
   languageName: node
   linkType: hard
 
-"sass@npm:^1.52.3":
-  version: 1.86.3
-  resolution: "sass@npm:1.86.3"
+"sass@npm:^1.85.1":
+  version: 1.85.1
+  resolution: "sass@npm:1.85.1"
   dependencies:
     "@parcel/watcher": "npm:^2.4.1"
     chokidar: "npm:^4.0.0"
@@ -9721,7 +9783,7 @@ __metadata:
       optional: true
   bin:
     sass: sass.js
-  checksum: 10/97c1c06aa6eab34b732fc1ce0c6816c0d63c4b68e1f5927981fdeba6d5b69765c318e455db2111f4ee616ae0b5015cc5c25f05db68ad03a052fd043ec97624c1
+  checksum: 10/2803b8d4d256a5ab6e7711776714e5bfaee957bd47d05489994d1d88e38307dc76f15ec8e35708d6f5701cf981a48cd005db574063242fcceaf056123ad644d5
   languageName: node
   linkType: hard
 
@@ -11421,10 +11483,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici-types@npm:~6.21.0":
-  version: 6.21.0
-  resolution: "undici-types@npm:6.21.0"
-  checksum: 10/ec8f41aa4359d50f9b59fa61fe3efce3477cc681908c8f84354d8567bb3701fafdddf36ef6bff307024d3feb42c837cf6f670314ba37fc8145e219560e473d14
+"undici-types@npm:~5.26.4":
+  version: 5.26.5
+  resolution: "undici-types@npm:5.26.5"
+  checksum: 10/0097779d94bc0fd26f0418b3a05472410408877279141ded2bd449167be1aed7ea5b76f756562cb3586a07f251b90799bab22d9019ceba49c037c76445f7cddd
   languageName: node
   linkType: hard