diff --git a/media/css/base/banners/firefox-app-store.scss b/media/css/base/banners/firefox-app-store.scss
index dc26503dc78..d996400c468 100644
--- a/media/css/base/banners/firefox-app-store.scss
+++ b/media/css/base/banners/firefox-app-store.scss
@@ -2,10 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
 
 #firefox-app-store-banner {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
diff --git a/media/css/base/banners/includes/_base.scss b/media/css/base/banners/includes/_base.scss
index dc523ffcf46..34090319ef7 100644
--- a/media/css/base/banners/includes/_base.scss
+++ b/media/css/base/banners/includes/_base.scss
@@ -2,10 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+// NOTE: config must be handled by file @use-ing this includes file
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .c-banner {
     @include clearfix;
diff --git a/media/css/base/banners/includes/_basic.scss b/media/css/base/banners/includes/_basic.scss
index ea4e3866d42..0c984b903a3 100644
--- a/media/css/base/banners/includes/_basic.scss
+++ b/media/css/base/banners/includes/_basic.scss
@@ -2,10 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+// NOTE: config must be handled by file @use-ing this includes file
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .c-banner {
     @include clearfix;
diff --git a/media/css/base/page-not-found.scss b/media/css/base/page-not-found.scss
index ea2d4a1043c..227d3915fb8 100644
--- a/media/css/base/page-not-found.scss
+++ b/media/css/base/page-not-found.scss
@@ -2,10 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .page-header {
     .mzp-l-content {
diff --git a/media/css/mozorg/home/includes/monitor-banner.scss b/media/css/mozorg/home/includes/monitor-banner.scss
index 8a08350f187..3b7a2a8379a 100644
--- a/media/css/mozorg/home/includes/monitor-banner.scss
+++ b/media/css/mozorg/home/includes/monitor-banner.scss
@@ -2,11 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '../../../base/banners/includes/basic';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
+@use '../../../base/banners/includes/basic';
 
 $gradient: to right,
 rgba(229, 63, 176, 0.15) 0%,