diff --git a/apps/admin/frontend/src/__snapshots__/app.test.tsx.snap b/apps/admin/frontend/src/__snapshots__/app.test.tsx.snap
index 5def2c434..c4abc760b 100644
--- a/apps/admin/frontend/src/__snapshots__/app.test.tsx.snap
+++ b/apps/admin/frontend/src/__snapshots__/app.test.tsx.snap
@@ -151,7 +151,7 @@ exports[`L&A (logic and accuracy) flow 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -159,7 +159,7 @@ exports[`L&A (logic and accuracy) flow 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -1336,7 +1336,7 @@ exports[`L&A (logic and accuracy) flow 2`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -1344,7 +1344,7 @@ exports[`L&A (logic and accuracy) flow 2`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -2670,7 +2670,7 @@ exports[`L&A (logic and accuracy) flow 3`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -2678,7 +2678,7 @@ exports[`L&A (logic and accuracy) flow 3`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
diff --git a/apps/central-scan/frontend/src/components/button_bar.tsx b/apps/central-scan/frontend/src/components/button_bar.tsx
index 30356c75c..09b142966 100644
--- a/apps/central-scan/frontend/src/components/button_bar.tsx
+++ b/apps/central-scan/frontend/src/components/button_bar.tsx
@@ -24,7 +24,7 @@ export const ButtonBar = styled('nav')<Props>`
     flex: 1;
     margin: 0.25rem;
 
-    @media (width >= 480px) {
+    @media (min-width: 480px) {
       flex: ${({ separatePrimaryButton }) =>
         separatePrimaryButton ? '0' : undefined};
     }
@@ -33,7 +33,7 @@ export const ButtonBar = styled('nav')<Props>`
   & > *:first-child {
     order: ${({ naturalOrder = false }) => (naturalOrder ? undefined : '2')};
 
-    @media (width >= 480px) {
+    @media (min-width: 480px) {
       margin-right: ${({ naturalOrder = false, separatePrimaryButton }) =>
         separatePrimaryButton && naturalOrder ? 'auto' : undefined};
       margin-left: ${({ naturalOrder = false, separatePrimaryButton }) =>
@@ -42,7 +42,7 @@ export const ButtonBar = styled('nav')<Props>`
   }
 
   & > *:only-child {
-    @media (width >= 480px) {
+    @media (min-width: 480px) {
       flex: ${({ centerOnlyChild = true }) => (centerOnlyChild ? 0 : 1)};
       margin: ${({ centerOnlyChild = true }) =>
         centerOnlyChild ? 'auto' : undefined};
diff --git a/apps/central-scan/frontend/src/components/prose.tsx b/apps/central-scan/frontend/src/components/prose.tsx
index cd0fd850c..3be5f574d 100644
--- a/apps/central-scan/frontend/src/components/prose.tsx
+++ b/apps/central-scan/frontend/src/components/prose.tsx
@@ -12,7 +12,7 @@ export const Prose = styled('div')<Props>`
   text-align: ${({ textCenter }) => (textCenter ? 'center' : undefined)};
   line-height: 1.2;
 
-  @media (width >= 480px) {
+  @media (min-width: 480px) {
     line-height: 1.3;
   }
 
diff --git a/apps/mark-scan/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap b/apps/mark-scan/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap
index 82b0473bb..6f8ee4a81 100644
--- a/apps/mark-scan/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap
+++ b/apps/mark-scan/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap
@@ -585,7 +585,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -595,7 +595,7 @@ exports[`Single Seat Contest 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -603,7 +603,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
diff --git a/apps/mark-scan/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap b/apps/mark-scan/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap
index b2fd20bea..e6ba857e5 100644
--- a/apps/mark-scan/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap
+++ b/apps/mark-scan/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap
@@ -585,7 +585,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -595,7 +595,7 @@ exports[`Single Seat Contest 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -603,7 +603,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
diff --git a/apps/mark-scan/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap b/apps/mark-scan/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap
index 5cd26a794..6bb5b1bb3 100644
--- a/apps/mark-scan/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap
+++ b/apps/mark-scan/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap
@@ -473,7 +473,7 @@ exports[`Single Seat Contest with Write In 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -481,7 +481,7 @@ exports[`Single Seat Contest with Write In 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
diff --git a/apps/mark/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap b/apps/mark/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap
index 687e23983..74e61f27f 100644
--- a/apps/mark/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap
+++ b/apps/mark/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap
@@ -493,7 +493,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -507,7 +507,7 @@ exports[`Single Seat Contest 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -515,7 +515,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
diff --git a/apps/mark/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap b/apps/mark/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap
index d1688802e..bc4e79fd6 100644
--- a/apps/mark/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap
+++ b/apps/mark/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap
@@ -493,7 +493,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -507,7 +507,7 @@ exports[`Single Seat Contest 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -515,7 +515,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
diff --git a/apps/mark/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap b/apps/mark/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap
index 2829bd1ac..bd3c1eecb 100644
--- a/apps/mark/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap
+++ b/apps/mark/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap
@@ -385,7 +385,7 @@ exports[`Single Seat Contest with Write In 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -393,7 +393,7 @@ exports[`Single Seat Contest with Write In 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
diff --git a/libs/ui/src/__snapshots__/button_bar.test.tsx.snap b/libs/ui/src/__snapshots__/button_bar.test.tsx.snap
index 103cff18f..18b390684 100644
--- a/libs/ui/src/__snapshots__/button_bar.test.tsx.snap
+++ b/libs/ui/src/__snapshots__/button_bar.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`renders ButtonBar 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
   .c0 > *:only-child {
     -webkit-box-flex: initial;
     -webkit-flex-grow: initial;
diff --git a/libs/ui/src/__snapshots__/modal.test.tsx.snap b/libs/ui/src/__snapshots__/modal.test.tsx.snap
index 165e175a5..7f6cbc67b 100644
--- a/libs/ui/src/__snapshots__/modal.test.tsx.snap
+++ b/libs/ui/src/__snapshots__/modal.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`Modal can configure a wider max width 1`] = `
   padding: 0.5rem 0.75rem;
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
   .c0 {
     position: static;
     border-radius: 0.5rem;
@@ -51,7 +51,7 @@ exports[`Modal can configure a wider max width 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -122,7 +122,7 @@ exports[`Modal can configure fullscreen 1`] = `
   overflow: auto;
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
   .c0 {
     position: static;
     border-radius: 0;
@@ -137,7 +137,7 @@ exports[`Modal can configure fullscreen 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
diff --git a/libs/ui/src/button_bar.tsx b/libs/ui/src/button_bar.tsx
index c1193cc15..04912d3fa 100644
--- a/libs/ui/src/button_bar.tsx
+++ b/libs/ui/src/button_bar.tsx
@@ -20,7 +20,7 @@ export const ButtonBar = styled('div')`
   }
 
   & > *:only-child {
-    @media (width >= 480px) {
+    @media (min-width: 480px) {
       flex-grow: initial;
       margin: auto;
       min-width: 33.333%;
diff --git a/libs/ui/src/button_list.tsx b/libs/ui/src/button_list.tsx
index 5204f0969..f11702b44 100644
--- a/libs/ui/src/button_list.tsx
+++ b/libs/ui/src/button_list.tsx
@@ -3,11 +3,11 @@ import styled from 'styled-components';
 export const ButtonList = styled.p`
   column-gap: 1rem;
 
-  @media (width >= 1024px) {
+  @media (min-width: 1024px) {
     columns: 2;
   }
 
-  @media (width >= 1440px) {
+  @media (min-width: 1440px) {
     columns: 3;
   }
 
diff --git a/libs/ui/src/modal.tsx b/libs/ui/src/modal.tsx
index 3cc53ee5f..02c7df461 100644
--- a/libs/ui/src/modal.tsx
+++ b/libs/ui/src/modal.tsx
@@ -39,7 +39,7 @@ const ReactModalContent = styled('div')<ReactModalContentInterface>`
   font-size: ${({ themeDeprecated }) => themeDeprecated?.fontSize};
   -webkit-overflow-scrolling: touch;
 
-  @media (width >= 480px) {
+  @media (min-width: 480px) {
     position: static;
     border-radius: ${({ fullscreen }) => (fullscreen ? '0' : '0.5rem')};
     max-width: ${({ fullscreen, modalWidth = ModalWidth.Standard }) =>
@@ -62,7 +62,7 @@ const ReactModalOverlay = styled('div')<ReactModalOverlayInterface>`
   z-index: 999; /* Should be above all default UI */
   background: ${(p) => rgba(p.theme.colors.foreground, 0.9)};
 
-  @media (width >= 480px) {
+  @media (min-width: 480px) {
     padding: ${({ fullscreen }) => (fullscreen ? '0' : '0.5rem')};
   }
 
diff --git a/stylelint.shared.js b/stylelint.shared.js
index ae719c935..aa17b6d00 100644
--- a/stylelint.shared.js
+++ b/stylelint.shared.js
@@ -1,8 +1,14 @@
+// Configuration for our CSS linting with stylelint
 module.exports = {
   extends: ['stylelint-config-standard'],
   customSyntax: 'postcss-styled-syntax',
   rules: {
+    // We use color functions (e.g. rgb) in nested JS that, being JS, need comma-separated
+    // parameters. "Modern" notation in CSS is space-separated parameters. "Legacy"
+    // notation enforces comma-separated parameters.
     'color-function-notation': 'legacy',
+    // Usually this rule is smart enough to ignore nested JS variable names, but
+    // sometimes it de-capitalizes them, so it's unsafe for auto-fix.
     'value-keyword-case': [
       'lower',
       {
@@ -10,5 +16,11 @@ module.exports = {
         camelCaseSvgKeywords: true,
       },
     ],
+    // Modern "context" notation for media queries is:
+    //         @media (width >= 600px)
+    // Chromium supports this only after version 104, so we enforce the older
+    // "prefix" notation:
+    //         @media (min-width: 600px)
+    'media-feature-range-notation': 'prefix',
   },
 };