diff --git a/.stylelintrc.js b/.stylelintrc.js
new file mode 100644
index 0000000000000..b96e5a20cb6e5
--- /dev/null
+++ b/.stylelintrc.js
@@ -0,0 +1,45 @@
+module.exports = {
+    extends: 'stylelint-config-standard-scss',
+    rules: {
+        'no-descending-specificity': null,
+        'number-max-precision': 5,
+        'value-keyword-case': [
+            'lower',
+            {
+                // CSS Color Module Level 3 says currentColor, Level 4 candidate says currentcolor
+                // Sticking to Level 3 for now
+                camelCaseSvgKeywords: true,
+            },
+        ],
+        // Sadly Safari only started supporting the range syntax of media queries in 2023, so let's switch to that
+        // ('context' value) in 2024, once support is better https://caniuse.com/?search=range%20context
+        'media-feature-range-notation': 'prefix',
+        'selector-class-pattern': [
+            '^[A-Za-z0-9_-]+(__[A-Za-z0-9_-]+)?(--[A-Za-z0-9-]+)?$',
+            {
+                message: 'Expected class selector to match Block__Element--Modifier or plain snake-case',
+            },
+        ],
+        'selector-id-pattern': [
+            '^[A-Za-z0-9_-]+(__[A-Za-z0-9_-]+)?(--[A-Za-z0-9_-]+)?$',
+            {
+                message: 'Expected id selector to match Block__Element--Modifier or plain kebak-case',
+            },
+        ],
+        'keyframes-name-pattern': [
+            '^[A-Za-z0-9_-]+__[A-Za-z0-9_-]+$',
+            {
+                message: 'Expected keyframe name to match Block__Animation',
+            },
+        ],
+        'scss/dollar-variable-pattern': [
+            '^[A-Za-z_]+[A-Za-z0-9_-]+$',
+            {
+                message: 'Expected variable to match kebab-case or snake_case',
+            },
+        ],
+        'scss/operator-no-newline-after': null,
+        'scss/at-extend-no-missing-placeholder': null,
+        'scss/comment-no-empty': null,
+    },
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
deleted file mode 100644
index d3e510e154525..0000000000000
--- a/.stylelintrc.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-    "extends": "stylelint-config-standard-scss",
-    "rules": {
-        "no-descending-specificity": null,
-        "color-function-notation": null,
-        "number-max-precision": 5,
-        "value-keyword-case": [
-            "lower",
-            {
-                "camelCaseSvgKeywords": true
-            }
-        ],
-        "selector-class-pattern": [
-            "^[A-Za-z0-9_-]+(__[A-Za-z0-9_-]+)?(--[A-Za-z0-9-]+)?$",
-            {
-                "message": "Expected class selector to match Block__Element--Modifier or plain snake-case"
-            }
-        ],
-        "selector-id-pattern": [
-            "^[A-Za-z0-9_-]+(__[A-Za-z0-9_-]+)?(--[A-Za-z0-9_-]+)?$",
-            {
-                "message": "Expected id selector to match Block__Element--Modifier or plain kebak-case"
-            }
-        ],
-        "keyframes-name-pattern": [
-            "^[A-Za-z0-9_-]+__[A-Za-z0-9_-]+$",
-            {
-                "message": "Expected keyframe name to match Block__Animation"
-            }
-        ],
-        "scss/dollar-variable-pattern": [
-            "^[A-Za-z_]+[A-Za-z0-9_-]+$",
-            {
-                "message": "Expected variable to match kebab-case or snake_case"
-            }
-        ],
-        "scss/operator-no-newline-after": null,
-        "scss/at-extend-no-missing-placeholder": null,
-        "scss/comment-no-empty": null
-    }
-}
diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
index 59a614766827c..30c14c722c8d4 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
+++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
@@ -12,7 +12,7 @@
         max-width: 60%;
         min-width: 30rem;
 
-        @media (width <= 1200px) {
+        @media (max-width: 1200px) {
             position: fixed;
             top: 0;
             right: 0;
diff --git a/frontend/src/lib/components/CommandPalette/index.scss b/frontend/src/lib/components/CommandPalette/index.scss
index 8c63773e6e6c3..0972ea918e81e 100644
--- a/frontend/src/lib/components/CommandPalette/index.scss
+++ b/frontend/src/lib/components/CommandPalette/index.scss
@@ -24,13 +24,13 @@
     background-color: var(--bg-3000-dark);
     overflow: hidden;
 
-    @media (width <= 500px) {
+    @media (max-width: 500px) {
         top: 10%;
         max-height: 80%;
         width: 100%;
     }
 
-    @media (height <= 500px) {
+    @media (max-height: 500px) {
         top: 0%;
         max-height: 100%;
         max-width: 90%;
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
index e560f8119f839..d683e23796f6f 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -359,7 +359,7 @@
     &.LemonButtonWithSideAction__spacer--divider {
         opacity: 0.17;
         padding-left: 0.375rem;
-        border-left: 1px solid currentcolor;
+        border-left: 1px solid currentColor;
     }
 
     .LemonButton--small & {
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
index 338abdf4c1465..8df6f4fc1166c 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
+++ b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
@@ -42,7 +42,7 @@
                 border-radius: 100%;
                 width: calc(var(--lemon-calendar-today-radius) * 2);
                 height: calc(var(--lemon-calendar-today-radius) * 2);
-                background: currentcolor;
+                background: currentColor;
             }
         }
     }
diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
index 4d375b962942c..4ff742148785c 100644
--- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
+++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
@@ -67,7 +67,7 @@
 
     &.LemonTabs__tab--active {
         color: var(--link);
-        text-shadow: 0 0 0.25px currentcolor; // Simulate increased weight without affecting width
+        text-shadow: 0 0 0.25px currentColor; // Simulate increased weight without affecting width
     }
 
     a {
diff --git a/frontend/src/lib/lemon-ui/Spinner/Spinner.scss b/frontend/src/lib/lemon-ui/Spinner/Spinner.scss
index 4c5345ff823de..9504dd20eb1c4 100644
--- a/frontend/src/lib/lemon-ui/Spinner/Spinner.scss
+++ b/frontend/src/lib/lemon-ui/Spinner/Spinner.scss
@@ -8,7 +8,7 @@
     --spinner-color: var(--brand-blue);
 
     &.Spinner--textColored {
-        --spinner-color: currentcolor;
+        --spinner-color: currentColor;
     }
 }
 
diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
index 2eb7f36f306f4..bc1db304a1058 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
@@ -4,7 +4,7 @@
         display: flex;
         column-gap: 1rem;
 
-        @media (width <= 960px) {
+        @media (max-width: 960px) {
             display: block;
             width: auto;
         }
@@ -17,7 +17,7 @@
     .HalfColumn {
         width: 50%;
 
-        @media (width <= 960px) {
+        @media (max-width: 960px) {
             width: 100%;
         }
     }
diff --git a/frontend/src/scenes/dashboard/Dashboard.scss b/frontend/src/scenes/dashboard/Dashboard.scss
index 7dc78e88a3118..f35d1decb41af 100644
--- a/frontend/src/scenes/dashboard/Dashboard.scss
+++ b/frontend/src/scenes/dashboard/Dashboard.scss
@@ -28,7 +28,7 @@
         }
     }
 
-    @media (width <= 768px) {
+    @media (max-width: 768px) {
         flex-direction: column;
 
         .dashboard-meta {
diff --git a/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss b/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss
index fb3d6d1b794a6..d8f9bffe605e7 100644
--- a/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss
+++ b/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss
@@ -4,7 +4,7 @@
     color: var(--border);
 
     .landxx {
-        fill: currentcolor;
+        fill: currentColor;
         stroke: var(--bg-light);
         stroke-width: 0.125rem;
         fill-rule: evenodd;
diff --git a/frontend/src/scenes/instance/SystemStatus/index.scss b/frontend/src/scenes/instance/SystemStatus/index.scss
index f467e3b15bd0e..b824861294f47 100644
--- a/frontend/src/scenes/instance/SystemStatus/index.scss
+++ b/frontend/src/scenes/instance/SystemStatus/index.scss
@@ -2,7 +2,7 @@
     margin-bottom: 64px;
 
     .metric-column {
-        @media (width >= 750px) {
+        @media (min-width: 750px) {
             width: 33%;
         }
     }
diff --git a/frontend/src/scenes/surveys/SurveyView.scss b/frontend/src/scenes/surveys/SurveyView.scss
index 373bd4ab914d2..33d89a3fdd679 100644
--- a/frontend/src/scenes/surveys/SurveyView.scss
+++ b/frontend/src/scenes/surveys/SurveyView.scss
@@ -3,7 +3,7 @@
     column-gap: 10px;
 }
 
-@media screen and (width <= 1024px) {
+@media screen and (max-width: 1024px) {
     .masonry-container {
         column-count: 2;
     }
diff --git a/frontend/src/scenes/toolbar-launch/ToolbarLaunch.scss b/frontend/src/scenes/toolbar-launch/ToolbarLaunch.scss
index fd8a999755550..33e6efce15e57 100644
--- a/frontend/src/scenes/toolbar-launch/ToolbarLaunch.scss
+++ b/frontend/src/scenes/toolbar-launch/ToolbarLaunch.scss
@@ -7,7 +7,7 @@
         .fh-item {
             width: calc(100% * (1 / 2) - 8px);
 
-            @media (width <= 599px) {
+            @media (max-width: 599px) {
                 width: calc(100% - 8px);
             }
 
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index deccf0168a387..2c35db1562c61 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -434,7 +434,7 @@ input::-ms-clear {
         cursor: pointer;
     }
 
-    @media screen and (width >= 750px) {
+    @media screen and (min-width: 750px) {
         font-size: 1rem;
         line-height: 2rem;