diff --git a/.postcssrc b/.postcssrc
index bcd4ab8f1..4fed08de0 100644
--- a/.postcssrc
+++ b/.postcssrc
@@ -10,11 +10,14 @@
     "postcss-custom-selectors": {
       "importFrom": "src/selectors.css"
     },
+    "postcss-custom-media": true,
     "postcss-custom-properties": {
       "preserve": true
     },
     "postcss-nested": true,
     "autoprefixer": true,
-    "postcss-extend": true
+    "postcss-extend": true,
+    "postcss-combine-media-query": true,
+    "postcss-sort-media-queries": true,
   }
 }
diff --git a/package-lock.json b/package-lock.json
index fee4d5406..0dd875245 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21732,6 +21732,37 @@
         }
       }
     },
+    "postcss-combine-media-query": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-combine-media-query/-/postcss-combine-media-query-1.0.0.tgz",
+      "integrity": "sha512-Tpu7eigki8soukzOa8bAAXq3HrYLBDhjtq4mgMUQt/r/LTDwdSJtoZNLGT95j0WPVzoz+02G/+Y3YpBG8f/+3A==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.21"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.26",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
+          "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "postcss-convert-values": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz",
@@ -21750,6 +21781,15 @@
         }
       }
     },
+    "postcss-custom-media": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz",
+      "integrity": "sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14"
+      }
+    },
     "postcss-custom-properties": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-9.0.2.tgz",
@@ -22857,6 +22897,38 @@
         "postcss": "^7.0.14"
       }
     },
+    "postcss-sort-media-queries": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-1.1.20.tgz",
+      "integrity": "sha512-t/zoQm7Nr2xSUATC1aG/bzLFUwnLc5fE8Zd9Yv3flFJX/CnLLYP+K+OhanbfDcfQ6GS9SIPO4/D/Gd509Ba3pw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.26",
+        "sort-css-media-queries": "1.5.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.26",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
+          "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "postcss-svgo": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.2.tgz",
@@ -25325,6 +25397,12 @@
         "flatstr": "^1.0.12"
       }
     },
+    "sort-css-media-queries": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-1.5.0.tgz",
+      "integrity": "sha512-QofNE7CEVH1AKdhS7L9IPbV9UtyQYNXyw++8lC+xG6iOLlpzsmncZRiKbihTAESvZ8wOhwnPoesHbMrehrQyyw==",
+      "dev": true
+    },
     "sort-keys": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
diff --git a/package.json b/package.json
index 92c5ba646..d52a08e7c 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,8 @@
     "normalize.css": "8.0.1",
     "parcel-bundler": "1.12.4",
     "parcel-plugin-url-loader": "git+https://github.com/stencila/parcel-plugin-url-loader.git",
+    "postcss-combine-media-query": "^1.0.0",
+    "postcss-custom-media": "^7.0.8",
     "postcss-custom-properties": "9.0.2",
     "postcss-custom-selectors": "5.1.2",
     "postcss-extend": "1.0.5",
@@ -72,6 +74,7 @@
     "postcss-import-url": "4.0.0",
     "postcss-mixins": "6.2.3",
     "postcss-nested": "4.2.1",
+    "postcss-sort-media-queries": "^1.1.20",
     "postcss-url": "8.0.0",
     "prismjs": "1.19.0",
     "stylelint": "13.0.0",