diff --git a/package-lock.json b/package-lock.json
index 84e0b0a5e..d99a94759 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13949,6 +13949,17 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
+    "node_modules/postcss-custom-media": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz",
+      "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/postcss-easy-import": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-easy-import/-/postcss-easy-import-3.0.0.tgz",
@@ -20678,6 +20689,7 @@
         "markdown-it-prism": "^2.2.0",
         "nunjucks": "^3.2.3",
         "postcss": "^8.3.6",
+        "postcss-custom-media": "^8.0.0",
         "postcss-easy-import": "^3.0.0",
         "postcss-extend-rule": "^4.0.0"
       },
@@ -22817,6 +22829,7 @@
         "markdown-it-prism": "^2.2.0",
         "nunjucks": "^3.2.3",
         "postcss": "^8.3.6",
+        "postcss-custom-media": "^8.0.0",
         "postcss-easy-import": "^3.0.0",
         "postcss-extend-rule": "^4.0.0"
       }
@@ -33541,6 +33554,12 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "postcss-custom-media": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz",
+      "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==",
+      "requires": {}
+    },
     "postcss-easy-import": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-easy-import/-/postcss-easy-import-3.0.0.tgz",
diff --git a/packages/frontend/lib/postcss.js b/packages/frontend/lib/postcss.js
index 233ec57f8..977f51231 100644
--- a/packages/frontend/lib/postcss.js
+++ b/packages/frontend/lib/postcss.js
@@ -1,13 +1,15 @@
 const fs = require("fs");
 const path = require("path");
 const postcss = require("postcss");
-const postcssEasyImport = require("postcss-easy-import");
-const postcssExtendRule = require("postcss-extend-rule");
 
 module.exports = (async () => {
   const options = {
     from: path.join(__dirname, "..", "styles/app.css"),
-    plugins: [postcssEasyImport, postcssExtendRule],
+    plugins: [
+      require("postcss-easy-import"),
+      require("postcss-custom-media"),
+      require("postcss-extend-rule"),
+    ],
   };
 
   const css = fs.readFileSync(options.from, "utf8");
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index d6c0b0198..7fe712be7 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -43,6 +43,7 @@
     "markdown-it-prism": "^2.2.0",
     "nunjucks": "^3.2.3",
     "postcss": "^8.3.6",
+    "postcss-custom-media": "^8.0.0",
     "postcss-easy-import": "^3.0.0",
     "postcss-extend-rule": "^4.0.0"
   },
diff --git a/packages/frontend/styles/config/custom-media.css b/packages/frontend/styles/config/custom-media.css
new file mode 100644
index 000000000..2598456d8
--- /dev/null
+++ b/packages/frontend/styles/config/custom-media.css
@@ -0,0 +1,6 @@
+@custom-media --upto-small-viewport (width < 480px);
+@custom-media --from-small-viewport (width >= 480px);
+@custom-media --upto-medium-viewport (width < 720px);
+@custom-media --from-medium-viewport (width >= 720px);
+@custom-media --upto-large-viewport (width <= 1024px);
+@custom-media --from-large-viewport (width > 1024px);