diff --git a/postcss.config.js b/postcss.config.js
index 7288465161..bb0b0c3521 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,11 +1,15 @@
 "use strict";
 
+const {media_breakpoints} = require("./static/js/css_variables.js");
+
 module.exports = {
     plugins: {
         // Warning: despite appearances, order is significant
         "postcss-nested": {},
         "postcss-extend-rule": {},
-        "postcss-simple-vars": {},
+        "postcss-simple-vars": {
+            variables: media_breakpoints,
+        },
         "postcss-calc": {},
         autoprefixer: {},
     },
diff --git a/static/js/css_variables.js b/static/js/css_variables.js
new file mode 100644
index 0000000000..c7f48b70d1
--- /dev/null
+++ b/static/js/css_variables.js
@@ -0,0 +1,24 @@
+"use strict";
+
+// Media query breakpoints according to Bootstrap 4.5
+const xs = 0;
+const sm = 576;
+const md = 768;
+const lg = 992;
+const xl = 1200;
+
+module.exports = {
+    media_breakpoints: {
+        "xs-min": xs + "px",
+        "sm-min": sm + "px",
+        "md-min": md + "px",
+        "lg-min": lg + "px",
+        "xl-min": xl + "px",
+
+        "xs-max": xs - 1 + "px",
+        "sm-max": sm - 1 + "px",
+        "md-max": md - 1 + "px",
+        "lg-max": lg - 1 + "px",
+        "xl-max": xl - 1 + "px",
+    },
+};
diff --git a/tools/test-js-with-node b/tools/test-js-with-node
index 2c224031fb..9c4c951f5e 100755
--- a/tools/test-js-with-node
+++ b/tools/test-js-with-node
@@ -52,6 +52,7 @@ EXEMPT_FILES = {
     'static/js/confirm_dialog.js',
     'static/js/copy_and_paste.js',
     'static/js/csrf.js',
+    'static/js/css_variables.js',
     'static/js/debug.js',
     'static/js/desktop_integration.js',
     'static/js/drafts.js',