diff --git a/client/.postcssrc.json b/client/.postcssrc.json
index 0ba12b8d..d198ee43 100644
--- a/client/.postcssrc.json
+++ b/client/.postcssrc.json
@@ -1,6 +1,7 @@
 {
   "plugins": {
     "postcss-import": {},
+    "postcss-mixins": {},
     "postcss-nested": {},
     "postcss-url": {},
     "postcss-reuse": {},
diff --git a/client/package-lock.json b/client/package-lock.json
index c56594be..aefede97 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -73,6 +73,7 @@
         "ora": "^1.2.0",
         "portfinder": "^1.0.13",
         "postcss-import": "^15.0.0",
+        "postcss-mixins": "^9.0.4",
         "postcss-nested": "^6.0.1",
         "postcss-reuse": "^2.2.0",
         "postcss-url": "^10.1.3",
@@ -7990,6 +7991,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001518",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001518.tgz",
@@ -15307,6 +15316,45 @@
         "postcss": "^8.0.0"
       }
     },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-mixins": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-9.0.4.tgz",
+      "integrity": "sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==",
+      "dependencies": {
+        "fast-glob": "^3.2.11",
+        "postcss-js": "^4.0.0",
+        "postcss-simple-vars": "^7.0.0",
+        "sugarss": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-nested": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
@@ -15348,6 +15396,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-simple-vars": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
+      "integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
+      "engines": {
+        "node": ">=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.1"
+      }
+    },
     "node_modules/postcss-url": {
       "version": "10.1.3",
       "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz",
@@ -16623,6 +16686,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sugarss": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
+      "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -23916,6 +23994,11 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
+    },
     "caniuse-lite": {
       "version": "1.0.30001518",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001518.tgz",
@@ -29149,6 +29232,25 @@
         "resolve": "^1.1.7"
       }
     },
+    "postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
+    "postcss-mixins": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-9.0.4.tgz",
+      "integrity": "sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==",
+      "requires": {
+        "fast-glob": "^3.2.11",
+        "postcss-js": "^4.0.0",
+        "postcss-simple-vars": "^7.0.0",
+        "sugarss": "^4.0.1"
+      }
+    },
     "postcss-nested": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
@@ -29174,6 +29276,12 @@
         "util-deprecate": "^1.0.2"
       }
     },
+    "postcss-simple-vars": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
+      "integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
+      "requires": {}
+    },
     "postcss-url": {
       "version": "10.1.3",
       "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz",
@@ -30168,6 +30276,12 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
+    "sugarss": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
+      "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
+      "requires": {}
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/client/package.json b/client/package.json
index fe7a8e66..ae8f8c06 100644
--- a/client/package.json
+++ b/client/package.json
@@ -100,6 +100,7 @@
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
     "postcss-import": "^15.0.0",
+    "postcss-mixins": "^9.0.4",
     "postcss-nested": "^6.0.1",
     "postcss-reuse": "^2.2.0",
     "postcss-url": "^10.1.3",
diff --git a/client/src/components/highlights/HighlightSidebar.vue b/client/src/components/highlights/HighlightSidebar.vue
index d69036e5..517fcf39 100644
--- a/client/src/components/highlights/HighlightSidebar.vue
+++ b/client/src/components/highlights/HighlightSidebar.vue
@@ -50,7 +50,7 @@ const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vu
 </script>
 
 <style scoped lang="postcss">
-@custom-media --desktop (min-width: 1200px);
+@import 'styles/css/mixins/desktop.css';
 
 .highlight-sidebar {
   position: fixed;
@@ -70,10 +70,9 @@ const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vu
 
   grid-template-areas: '. x' 'h h' 'n n';
 
-  @media (--desktop) {
+  @mixin desktop {
     width: 300px;
   }
-
   &__close-button {
     grid-area: x;
   }
diff --git a/client/src/styles/css/mixins/desktop.css b/client/src/styles/css/mixins/desktop.css
new file mode 100644
index 00000000..e6b291f5
--- /dev/null
+++ b/client/src/styles/css/mixins/desktop.css
@@ -0,0 +1,5 @@
+@define-mixin desktop {
+  @media (min-width: 1200px) {
+    @mixin-content;
+  }
+}