diff --git a/client/src/about/index.scss b/client/src/about/index.scss
index 5b262293963c..3388f85691c9 100644
--- a/client/src/about/index.scss
+++ b/client/src/about/index.scss
@@ -12,7 +12,7 @@
       margin-top: 3rem;
     }
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       h1 {
         font-size: 3.5rem;
       }
@@ -48,7 +48,7 @@
 
     .heading-break {
       display: none;
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         display: block;
       }
     }
diff --git a/client/src/about/testimonial/index.scss b/client/src/about/testimonial/index.scss
index 8b3243e67af0..2a245a2bb3e9 100644
--- a/client/src/about/testimonial/index.scss
+++ b/client/src/about/testimonial/index.scss
@@ -7,7 +7,7 @@
   padding: 2rem 0;
   width: 100%;
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     flex-direction: row;
   }
 
@@ -15,7 +15,7 @@
     height: 50vw;
     padding: 0;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       height: initial;
       width: 48%;
     }
@@ -26,7 +26,7 @@
     max-width: 18rem;
     text-align: center;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       margin: initial;
       text-align: initial;
     }
@@ -34,7 +34,7 @@
     img {
       margin: 0 auto;
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         margin: initial;
       }
     }
diff --git a/client/src/advertising/with_us/index.scss b/client/src/advertising/with_us/index.scss
index 16199e297ee9..5527d8fa83da 100644
--- a/client/src/advertising/with_us/index.scss
+++ b/client/src/advertising/with_us/index.scss
@@ -63,15 +63,15 @@ main.advertise-with-us {
       display: grid;
       gap: 0.3em;
 
-      @media screen and (max-width: $screen-md) {
+      @media (max-width: $screen-md) {
         grid-template-columns: 1fr 1fr;
       }
 
-      @media screen and (max-width: $screen-sm) {
+      @media (max-width: $screen-sm) {
         grid-template-columns: 1fr;
       }
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         grid-template-columns: 1fr 1fr 1fr 1fr;
       }
 
diff --git a/client/src/app.scss b/client/src/app.scss
index 68e73d2291bf..892b879c5c18 100644
--- a/client/src/app.scss
+++ b/client/src/app.scss
@@ -109,7 +109,7 @@
   );
 }
 
-@media screen and (min-width: $screen-md) {
+@media (min-width: $screen-md) {
   :root {
     --type-heading-h1: 600 var(--type-heading-h1-font-size) /
       var(--heading-line-height) var(--font-heading);
@@ -139,7 +139,7 @@ body {
   scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg);
 
   &.mobile-overlay-active {
-    @media screen and (max-width: $screen-md) {
+    @media (max-width: $screen-md) {
       overflow: hidden;
     }
   }
diff --git a/client/src/blog/index.scss b/client/src/blog/index.scss
index f0ac505d2c33..09346bf7e852 100644
--- a/client/src/blog/index.scss
+++ b/client/src/blog/index.scss
@@ -110,7 +110,7 @@
       display: grid;
       grid-template-columns: 1fr 1fr;
 
-      @media screen and (max-width: $screen-lg) {
+      @media (max-width: $screen-lg) {
         grid-template-columns: auto;
       }
     }
diff --git a/client/src/blog/post.scss b/client/src/blog/post.scss
index 477c49f10f2a..6a6aad114601 100644
--- a/client/src/blog/post.scss
+++ b/client/src/blog/post.scss
@@ -8,21 +8,21 @@
     "newsletter";
   width: 100%;
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     grid-template-areas:
       "post toc"
       "newsletter toc";
     grid-template-columns: minmax(auto, 100%) minmax(0, 12rem);
   }
 
-  @media screen and (min-width: $screen-xl) {
+  @media (min-width: $screen-xl) {
     grid-template-areas:
       "nothing post toc"
       "nothing newsletter toc";
     grid-template-columns: minmax(auto, 1fr) minmax(0, 52rem) minmax(15rem, 1fr);
   }
 
-  @media screen and (min-width: $screen-xxl) {
+  @media (min-width: $screen-xxl) {
     grid-template-areas:
       "toc post place"
       "toc newsletter place";
@@ -36,7 +36,7 @@
     --offset: var(--top-nav-height);
     display: none;
 
-    @media screen and (min-width: $screen-lg) {
+    @media (min-width: $screen-lg) {
       display: flex;
       flex-direction: column;
       grid-area: toc;
@@ -45,7 +45,7 @@
         margin-top: 2rem;
       }
     }
-    @media screen and (min-width: $screen-xxl) {
+    @media (min-width: $screen-xxl) {
       display: contents;
 
       .place.side,
@@ -91,7 +91,7 @@
       display: flex;
       gap: 1rem;
 
-      @media screen and (max-width: $screen-md) {
+      @media (max-width: $screen-md) {
         flex-direction: column-reverse;
       }
 
@@ -110,7 +110,7 @@
           background: none;
         }
 
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           &.previous,
           &.next {
             &::before,
diff --git a/client/src/community/index.scss b/client/src/community/index.scss
index 8d1c2c7349b4..0caef5661a13 100644
--- a/client/src/community/index.scss
+++ b/client/src/community/index.scss
@@ -55,15 +55,15 @@ main.contribute {
       display: grid;
       gap: 0.3em;
 
-      @media screen and (max-width: $screen-md) {
+      @media (max-width: $screen-md) {
         grid-template-columns: 1fr 1fr;
       }
 
-      @media screen and (max-width: $screen-sm) {
+      @media (max-width: $screen-sm) {
         grid-template-columns: 1fr;
       }
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         grid-template-columns: 1fr 1fr 1fr 1fr;
       }
 
diff --git a/client/src/curriculum/landing.scss b/client/src/curriculum/landing.scss
index 85ea657bf6dd..ea30153c8a83 100644
--- a/client/src/curriculum/landing.scss
+++ b/client/src/curriculum/landing.scss
@@ -22,13 +22,13 @@
     padding-top: 0;
 
     ol.modules-list {
-      @media screen and (min-width: $screen-sm) {
+      @media (min-width: $screen-sm) {
         grid-template-columns: 1fr 1fr;
       }
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         grid-template-columns: 1fr 1fr 1fr;
       }
-      @media screen and (min-width: $screen-lg) {
+      @media (min-width: $screen-lg) {
         grid-template-columns: 1fr 1fr 1fr 1fr;
       }
     }
@@ -37,7 +37,7 @@
   header.landing-header {
     display: grid;
     grid-template-areas: "copy" "svg";
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       grid-template-areas: "copy svg";
       grid-template-columns: 30rem auto;
     }
@@ -50,7 +50,7 @@
       max-width: 28rem;
       width: 100%;
       z-index: 1;
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         margin-bottom: 0;
       }
 
@@ -69,7 +69,7 @@
       margin-top: 3rem;
       max-width: 30rem;
       padding-right: 1rem;
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         margin-bottom: 4rem;
       }
 
@@ -77,7 +77,7 @@
         color: var(--curriculum-color-topic);
         font-size: 2rem;
         margin-bottom: 0.5rem;
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           font-size: 2.5rem;
         }
       }
@@ -86,7 +86,7 @@
         font-size: 1.25rem;
         margin-bottom: 1.5rem;
         margin-top: 0.5rem;
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           font-size: 2rem;
           margin-bottom: 2rem;
         }
@@ -115,7 +115,7 @@
       grid-template-columns: 1fr;
       margin: 0 auto 3rem;
       max-width: min(var(--max-width), 74rem);
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         grid-template-areas:
           "li li "
           "h2 . "
@@ -149,25 +149,25 @@
           padding: 1rem;
           transform: translateY(-1rem);
           width: 100%;
-          @media screen and (min-width: $screen-sm) {
+          @media (min-width: $screen-sm) {
             align-items: center;
             gap: 1rem;
           }
-          @media screen and (min-width: $screen-md) {
+          @media (min-width: $screen-md) {
             justify-content: start;
           }
-          @media screen and (min-width: $screen-lg) {
+          @media (min-width: $screen-lg) {
             justify-content: center;
           }
 
           > li {
             margin: 0 0.5rem;
             text-align: center;
-            @media screen and (min-width: $screen-sm) {
+            @media (min-width: $screen-sm) {
               margin: 0 1rem;
               width: max-content;
             }
-            @media screen and (min-width: $screen-md) {
+            @media (min-width: $screen-md) {
               align-items: center;
               display: inline-flex;
               gap: 1rem;
@@ -178,7 +178,7 @@
               height: 3rem;
               margin: 0 auto;
               width: 3rem;
-              @media screen and (min-width: $screen-md) {
+              @media (min-width: $screen-md) {
                 display: initial;
                 margin: 0;
               }
@@ -266,10 +266,10 @@
       padding-right: var(--gutter);
       width: 100%;
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         grid-template-columns: min(100%, 34rem);
       }
-      @media screen and (min-width: $screen-lg) {
+      @media (min-width: $screen-lg) {
         grid-template-areas: "a b";
         grid-template-columns: 1fr 1.4fr;
       }
@@ -280,7 +280,7 @@
 
       > #stairway1-container {
         --fs: clamp(1rem, calc(3 * calc(100vw / 100)), 1.75rem);
-        @media screen and (min-width: $screen-lg) {
+        @media (min-width: $screen-lg) {
           --fs: clamp(1rem, calc(2 * calc(100vw / 100)), 1.75rem);
         }
         grid-area: a;
@@ -310,7 +310,7 @@
 
       > #stairway2-container {
         --fs: clamp(0.75rem, calc(1.25 * calc(100vw / 100)), 1rem);
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           --fs: clamp(0.75rem, calc(100vw / 100), 0.825rem);
         }
         grid-area: b;
@@ -332,7 +332,7 @@
             max-width: 10rem;
             position: absolute;
             text-wrap: wrap;
-            @media screen and (min-width: $screen-md) {
+            @media (min-width: $screen-md) {
               max-width: initial;
               text-wrap: nowrap;
             }
@@ -357,7 +357,7 @@
             left: 8%;
             top: 86%;
           }
-          @media screen and (min-width: $screen-md) {
+          @media (min-width: $screen-md) {
             #stair-1 {
               left: 35%;
               top: 53%;
@@ -384,7 +384,7 @@
           &#stairway2large {
             display: none;
             grid-area: b;
-            @media screen and (min-width: $screen-md) {
+            @media (min-width: $screen-md) {
               display: initial;
             }
           }
@@ -392,7 +392,7 @@
           &#stairway2small {
             grid-area: b;
             max-width: 100%;
-            @media screen and (min-width: $screen-md) {
+            @media (min-width: $screen-md) {
               display: none;
             }
           }
@@ -423,14 +423,14 @@
         max-width: 52rem;
         overflow: scroll;
         scroll-snap-type: inline mandatory;
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           gap: 5rem 4rem;
           grid-template-areas:
             "beginner advanced"
             "employ educator";
           grid-template-columns: auto auto;
         }
-        @media screen and (min-width: $screen-lg) {
+        @media (min-width: $screen-lg) {
           gap: 5rem 8rem;
         }
 
@@ -452,7 +452,7 @@
           scroll-snap-align: center;
           width: 80vw;
 
-          @media screen and (min-width: $screen-md) {
+          @media (min-width: $screen-md) {
             align-items: start;
             background-color: initial;
             gap: 1rem 2rem;
@@ -472,7 +472,7 @@
             display: inline-block;
             height: 3rem;
             width: 3rem;
-            @media screen and (min-width: $screen-md) {
+            @media (min-width: $screen-md) {
               grid-area: i;
               height: 5rem;
               width: 5rem;
@@ -538,7 +538,7 @@
             text-align: center;
             text-decoration: none;
             width: fit-content;
-            @media screen and (min-width: $screen-md) {
+            @media (min-width: $screen-md) {
               justify-self: start;
             }
 
diff --git a/client/src/curriculum/modules-list.scss b/client/src/curriculum/modules-list.scss
index 622c1a38765b..eef7a9b937d6 100644
--- a/client/src/curriculum/modules-list.scss
+++ b/client/src/curriculum/modules-list.scss
@@ -23,7 +23,7 @@
       margin: 0;
       padding: 0;
 
-      @media screen and (min-width: $screen-sm) {
+      @media (min-width: $screen-sm) {
         grid-template-areas:
           "started core  extensions spacer"
           "hr      hr    hr         hr"
@@ -88,7 +88,7 @@
           > input {
             grid-area: core;
 
-            @media screen and (min-width: $screen-sm) {
+            @media (min-width: $screen-sm) {
               margin-left: 2rem;
             }
           }
@@ -103,7 +103,7 @@
           > input {
             grid-area: extensions;
 
-            @media screen and (min-width: $screen-sm) {
+            @media (min-width: $screen-sm) {
               margin-left: 2rem;
             }
           }
@@ -124,7 +124,7 @@
           margin-top: 2rem;
           width: fit-content;
 
-          @media screen and (min-width: $screen-md) {
+          @media (min-width: $screen-md) {
             margin-left: 0;
           }
         }
@@ -141,7 +141,7 @@
       padding: 0.5rem;
       scroll-snap-type: inline mandatory;
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         overflow: inherit;
         padding: 0;
       }
@@ -176,7 +176,7 @@
             text-decoration: none;
           }
 
-          @media screen and (min-width: $screen-md) {
+          @media (min-width: $screen-md) {
             min-width: initial;
           }
 
@@ -234,11 +234,11 @@
         }
       }
 
-      @media screen and (min-width: $screen-sm) {
+      @media (min-width: $screen-sm) {
         grid-template-columns: 1fr 1fr;
       }
 
-      @media screen and (min-width: $screen-xxl) {
+      @media (min-width: $screen-xxl) {
         grid-template-columns: 1fr 1fr 1fr;
       }
     }
diff --git a/client/src/document/index.scss b/client/src/document/index.scss
index f6fa61ee4894..9e0ef2fb60f9 100644
--- a/client/src/document/index.scss
+++ b/client/src/document/index.scss
@@ -248,13 +248,13 @@
     }
   }
 
-  @media screen and (min-width: $screen-sm) {
+  @media (min-width: $screen-sm) {
     padding: 3rem;
     // Reduce space to article footer.
     padding-bottom: 0;
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     // Reduce space to article footer.
     margin-bottom: 0;
     padding: 0;
@@ -374,7 +374,7 @@ h1 {
   margin-bottom: 2rem;
   word-break: break-word;
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     font: var(--type-heading-h1);
   }
 }
@@ -519,7 +519,7 @@ pre {
   ul {
     margin: 0.5rem 0 2rem;
 
-    @media screen and (min-width: $screen-xl) {
+    @media (min-width: $screen-xl) {
       columns: 3;
     }
 
@@ -860,7 +860,7 @@ kbd {
   --offset: var(--sticky-header-with-actions-height);
   --max-height: calc(100vh - var(--offset));
 
-  @media screen and (min-width: $screen-md) and (min-height: $screen-height-place-limit) {
+  @media (min-width: $screen-md) and (min-height: $screen-height-place-limit) {
     display: flex;
     flex-direction: column;
   }
@@ -870,7 +870,7 @@ kbd {
   top: var(--offset);
   z-index: var(--z-index-sidebar-mobile);
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     z-index: auto;
 
     .sidebar {
@@ -881,7 +881,7 @@ kbd {
       );
     }
 
-    @media screen and not (min-height: $screen-height-place-limit) {
+    @media not (min-height: $screen-height-place-limit) {
       overflow: auto;
     }
   }
@@ -892,7 +892,7 @@ kbd {
       grid-area: toc;
       margin: 0;
     }
-    @media screen and (min-width: $screen-xl) {
+    @media (min-width: $screen-xl) {
       display: flex;
       flex-direction: column;
       gap: 0;
@@ -912,13 +912,13 @@ kbd {
         padding-bottom: 3rem;
       }
     }
-    @media screen and (max-width: #{$screen-md - 1}) {
+    @media (max-width: #{$screen-md - 1}) {
       .place {
         display: none;
       }
     }
   }
-  @media screen and (min-width: $screen-xl) {
+  @media (min-width: $screen-xl) {
     display: contents;
 
     .sidebar {
diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
index 8fe71876fb26..bda3cc8cc3b4 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
@@ -1,4 +1,4 @@
-@media screen and (min-width: $screen-md) {
+@media (min-width: $screen-md) {
   .table-container {
     width: calc(100% + 6rem);
   }
diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
index 82a8c1294f72..26a1fcfe73f1 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
@@ -1,4 +1,4 @@
-@media screen and (min-width: $screen-xl) {
+@media (min-width: $screen-xl) {
   .table-container {
     margin: 0;
     width: 100%;
diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
index 5db51b15bb34..269ae3b1dd4f 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
@@ -1,6 +1,6 @@
 // Style for desktop.
 
-@media screen and (min-width: $screen-sm) {
+@media (min-width: $screen-sm) {
   .bc-table {
     thead {
       display: table-header-group;
diff --git a/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss b/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss
index 4d97c083d859..8550e5d3a02d 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss
@@ -1,6 +1,6 @@
 // Style for mobile.
 
-@media screen and (max-width: $screen-sm - 1px) {
+@media (max-width: $screen-sm - 1px) {
   .bc-table {
     thead {
       display: none;
diff --git a/client/src/document/ingredients/browser-compatibility-table/index.scss b/client/src/document/ingredients/browser-compatibility-table/index.scss
index 88bf9620423a..be464957aaeb 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index.scss
@@ -18,7 +18,7 @@
     font-weight: 500;
     padding: 0;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       font-size: var(--type-smaller-font-size);
       padding: 0.4rem;
 
@@ -41,7 +41,7 @@
     tr {
       height: 3rem;
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         &:last-child {
           th,
           td {
@@ -393,7 +393,7 @@ dl.bc-notes-list {
   flex-direction: row;
   gap: 0.5rem;
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     align-items: center;
     flex-direction: column;
   }
@@ -433,12 +433,12 @@ dl.bc-notes-list {
   display: flex;
   gap: 0.5rem;
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     display: block;
   }
 }
 
-@media screen and (min-width: $screen-md) {
+@media (min-width: $screen-md) {
   .bc-table {
     td {
       height: 2rem;
diff --git a/client/src/document/interactive-examples.scss b/client/src/document/interactive-examples.scss
index b5475f98d6e3..13162267148f 100644
--- a/client/src/document/interactive-examples.scss
+++ b/client/src/document/interactive-examples.scss
@@ -54,8 +54,7 @@
 // wide in the mobile layout to the time it switches
 // to two columns. Then, from the time the iframe
 // is 590px wide in the two-column layout on up.
-@media screen and (min-width: 688px) and (max-width: $screen-md - 1),
-  screen and (min-width: 1008px) {
+@media (min-width: 688px) and (max-width: $screen-md - 1), (min-width: 1008px) {
   .interactive {
     height: 375px;
 
diff --git a/client/src/document/organisms/article-footer/index.scss b/client/src/document/organisms/article-footer/index.scss
index 9ed78ff2c5b2..a76eb18c461c 100644
--- a/client/src/document/organisms/article-footer/index.scss
+++ b/client/src/document/organisms/article-footer/index.scss
@@ -8,13 +8,13 @@
   margin: 0;
   padding: 1rem;
 
-  @media screen and (max-width: $screen-md) {
+  @media (max-width: $screen-md) {
     margin: 3rem;
     // Reduce space to article content.
     margin-top: 0;
   }
 
-  @media screen and (max-width: $screen-sm) {
+  @media (max-width: $screen-sm) {
     margin-left: 1rem;
     margin-right: 1rem;
   }
diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index b73edf6632be..50392eb80a88 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -13,7 +13,7 @@
   padding-right: 0.5rem;
   padding-top: 0.5rem;
 
-  @media screen and (max-width: $screen-md) {
+  @media (max-width: $screen-md) {
     padding-bottom: unset;
   }
 
@@ -90,7 +90,7 @@
       position: absolute;
       right: 2.5rem;
 
-      @media screen and (max-width: $screen-md) {
+      @media (max-width: $screen-md) {
         right: 3rem;
       }
     }
@@ -104,7 +104,7 @@
         background: transparent;
       }
 
-      @media screen and (max-width: $screen-md) {
+      @media (max-width: $screen-md) {
         left: calc(100% - 3rem);
       }
     }
diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index d570cb70f775..0458ebecdc91 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -89,7 +89,7 @@
       margin-top: 0.5rem;
     }
 
-    @media screen and (max-width: $screen-md) {
+    @media (max-width: $screen-md) {
       height: unset;
       margin-top: unset;
       padding-bottom: unset;
@@ -159,7 +159,7 @@
   }
 
   // apply drawer styles only to the sizes that need them.
-  @media screen and (max-width: #{$screen-md - 1}) {
+  @media (max-width: #{$screen-md - 1}) {
     height: 100vh;
     left: 0;
     max-height: 100vh;
@@ -194,7 +194,7 @@
         padding-bottom: 3rem;
       }
 
-      @media screen and (min-height: $screen-height-place-limit) {
+      @media (min-height: $screen-height-place-limit) {
         display: flex;
         flex-direction: column;
         overflow: hidden;
@@ -247,20 +247,19 @@
     }
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     .place {
       display: none;
     }
   }
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     display: flex;
   }
-  @media screen and (min-width: $screen-lg),
-    screen and (min-height: $screen-height-place-limit) {
+  @media (min-width: $screen-lg), (min-height: $screen-height-place-limit) {
     display: block;
     overflow: auto;
   }
-  @media screen and (min-width: $screen-xl) {
+  @media (min-width: $screen-xl) {
     max-height: var(--max-height);
     position: sticky;
     top: var(--offset);
diff --git a/client/src/document/organisms/toc/index.scss b/client/src/document/organisms/toc/index.scss
index f8825b311d77..b86bb86a8459 100644
--- a/client/src/document/organisms/toc/index.scss
+++ b/client/src/document/organisms/toc/index.scss
@@ -6,7 +6,7 @@
   margin-bottom: 2rem;
   padding: 0;
 
-  @media screen and (max-width: $screen-sm) {
+  @media (max-width: $screen-sm) {
     padding: 0 1rem;
   }
 
diff --git a/client/src/document/toolbar/index.scss b/client/src/document/toolbar/index.scss
index 31433955d123..64d3cc132b6c 100644
--- a/client/src/document/toolbar/index.scss
+++ b/client/src/document/toolbar/index.scss
@@ -29,7 +29,7 @@
     }
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     margin: 0 0 2rem;
   }
 }
diff --git a/client/src/homepage/contributor-spotlight/index.scss b/client/src/homepage/contributor-spotlight/index.scss
index 0f94bbcbf30a..0f259abb8f7b 100644
--- a/client/src/homepage/contributor-spotlight/index.scss
+++ b/client/src/homepage/contributor-spotlight/index.scss
@@ -103,7 +103,7 @@
     }
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     .wrapper {
       align-items: initial;
       flex-direction: row;
diff --git a/client/src/homepage/featured-articles/index.scss b/client/src/homepage/featured-articles/index.scss
index 0eb91706a122..719ac5d470a6 100644
--- a/client/src/homepage/featured-articles/index.scss
+++ b/client/src/homepage/featured-articles/index.scss
@@ -19,7 +19,7 @@
     grid-auto-flow: row;
     max-width: 52rem;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       grid-template-columns: repeat(2, 1fr);
     }
   }
@@ -74,7 +74,7 @@
       line-height: var(--base-line-height);
       margin: 0;
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         min-height: calc(3em * var(--base-line-height));
       }
     }
diff --git a/client/src/homepage/homepage-hero/index.scss b/client/src/homepage/homepage-hero/index.scss
index 38f66f3a3408..7df1acaf9b39 100644
--- a/client/src/homepage/homepage-hero/index.scss
+++ b/client/src/homepage/homepage-hero/index.scss
@@ -32,11 +32,11 @@
       line-height: 120%;
       margin: 0;
 
-      @media screen and (min-width: $screen-sm) {
+      @media (min-width: $screen-sm) {
         font-size: 2.5rem;
       }
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         font-size: 3rem;
       }
     }
@@ -95,7 +95,7 @@
 
     .mandala-translate {
       transform: translate(10rem, -8rem) scale(1.2);
-      @media screen and (min-width: $screen-sm) {
+      @media (min-width: $screen-sm) {
         transform: translate(12rem, -8rem);
       }
     }
diff --git a/client/src/homepage/latest-news/index.scss b/client/src/homepage/latest-news/index.scss
index cd7fdfd5b4ae..6f25efe66831 100644
--- a/client/src/homepage/latest-news/index.scss
+++ b/client/src/homepage/latest-news/index.scss
@@ -8,7 +8,7 @@
   padding: 0 1rem;
   width: 100%;
 
-  @media screen and (min-width: $screen-xl) {
+  @media (min-width: $screen-xl) {
     padding: 0;
   }
 
@@ -27,7 +27,7 @@
     justify-content: space-between;
     padding: 0.7rem;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       flex-direction: revert;
     }
 
diff --git a/client/src/homepage/recent-contributions/index.scss b/client/src/homepage/recent-contributions/index.scss
index e30f6673b249..67b8a6bc6986 100644
--- a/client/src/homepage/recent-contributions/index.scss
+++ b/client/src/homepage/recent-contributions/index.scss
@@ -8,7 +8,7 @@
   padding: 0 1rem;
   width: 100%;
 
-  @media screen and (min-width: $screen-xl) {
+  @media (min-width: $screen-xl) {
     padding: 0;
   }
 
@@ -27,7 +27,7 @@
     justify-content: space-between;
     padding: 0.7rem;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       flex-direction: revert;
     }
 
diff --git a/client/src/playground/index.scss b/client/src/playground/index.scss
index c57a20bebc20..6914555848d7 100644
--- a/client/src/playground/index.scss
+++ b/client/src/playground/index.scss
@@ -25,7 +25,7 @@ main.play {
   grid-template-columns: 1fr;
   min-height: var(--play-height);
   padding: 1rem;
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     grid-template-columns: 1fr 1fr;
   }
 
@@ -201,7 +201,7 @@ main.play {
             min-height: 100%;
             width: 100%;
 
-            @media screen and (max-width: $screen-sm) {
+            @media (max-width: $screen-sm) {
               font-size: 1rem;
             }
           }
@@ -213,7 +213,7 @@ main.play {
       align-items: center;
       display: flex;
       flex-direction: column;
-      @media screen and (min-width: 25rem) {
+      @media (min-width: 25rem) {
         .place {
           align-self: flex-end;
           max-width: 20rem;
diff --git a/client/src/plus/ai-help/history.scss b/client/src/plus/ai-help/history.scss
index 3fdbcad80792..2a24eef19ece 100644
--- a/client/src/plus/ai-help/history.scss
+++ b/client/src/plus/ai-help/history.scss
@@ -50,7 +50,7 @@
           display: none;
         }
 
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           .hide-history {
             display: none;
           }
@@ -74,7 +74,7 @@
           display: none;
         }
 
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           // Hiding doesn't make sense on desktop.
           display: none;
         }
@@ -142,7 +142,7 @@
     }
   }
 
-  @media screen and (max-width: $screen-md) {
+  @media (max-width: $screen-md) {
     background-color: var(--background-primary);
     grid-column: center;
     grid-row: 2/3;
@@ -214,7 +214,7 @@
     }
   }
 
-  @media screen and (max-width: $screen-md) {
+  @media (max-width: $screen-md) {
     margin: 0.5rem;
     padding: 1rem 1.5rem;
 
diff --git a/client/src/plus/ai-help/index.scss b/client/src/plus/ai-help/index.scss
index ecb6c0358724..27179fcc15d9 100644
--- a/client/src/plus/ai-help/index.scss
+++ b/client/src/plus/ai-help/index.scss
@@ -47,10 +47,10 @@
         position: sticky;
         top: var(--sticky-header-without-actions-height);
       }
-      @media screen and (max-width: $screen-xxl) {
+      @media (max-width: $screen-xxl) {
         grid-template-columns: [left] minmax(0, 15rem) [center] minmax(0, 3fr);
       }
-      @media screen and (max-width: $screen-md) {
+      @media (max-width: $screen-md) {
         grid-template-columns: [center] minmax(0, 3fr);
 
         > .ai-help-history {
diff --git a/client/src/plus/ai-help/landing.scss b/client/src/plus/ai-help/landing.scss
index 183f25c9ca71..5ce22b4f4307 100644
--- a/client/src/plus/ai-help/landing.scss
+++ b/client/src/plus/ai-help/landing.scss
@@ -24,13 +24,13 @@
     flex-direction: column;
     gap: 2rem;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       flex-direction: row;
       gap: 6rem;
       justify-content: space-evenly;
     }
 
-    @media screen and (min-width: $screen-lg) {
+    @media (min-width: $screen-lg) {
       gap: 12rem;
     }
 
@@ -63,7 +63,7 @@
       gap: 2rem;
       margin: 2rem 0;
 
-      @media screen and (min-width: $screen-md) {
+      @media (min-width: $screen-md) {
         flex-direction: row;
         gap: 3rem;
         justify-content: space-between;
@@ -88,7 +88,7 @@
           }
         }
 
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           // Desktop.
           display: block;
 
@@ -103,7 +103,7 @@
           }
         }
 
-        @media screen and (max-width: #{$screen-md - 1}) {
+        @media (max-width: #{$screen-md - 1}) {
           // Mobile.
 
           figcaption {
diff --git a/client/src/plus/collections/collection.scss b/client/src/plus/collections/collection.scss
index a4dcb2f6c660..8c91f736e929 100644
--- a/client/src/plus/collections/collection.scss
+++ b/client/src/plus/collections/collection.scss
@@ -54,7 +54,7 @@
           margin-top: -0.125rem;
         }
 
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           li > div > button {
             .button-wrap {
               --button-color: var(--text-secondary);
diff --git a/client/src/plus/collections/index.scss b/client/src/plus/collections/index.scss
index 317f0d21fe95..95190d1cd93d 100644
--- a/client/src/plus/collections/index.scss
+++ b/client/src/plus/collections/index.scss
@@ -24,7 +24,7 @@
     gap: 1rem;
     padding: 1rem;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
     }
   }
@@ -104,7 +104,7 @@
       font-size: 0.875rem;
     }
 
-    @media screen and (max-width: $screen-md) {
+    @media (max-width: $screen-md) {
       .count {
         display: none;
       }
diff --git a/client/src/plus/icon-card/index.scss b/client/src/plus/icon-card/index.scss
index d7b93dec74bd..89058131f781 100644
--- a/client/src/plus/icon-card/index.scss
+++ b/client/src/plus/icon-card/index.scss
@@ -112,7 +112,7 @@
     flex: 1 1 80%;
     overflow: hidden;
 
-    @media screen and (max-width: $screen-sm) {
+    @media (max-width: $screen-sm) {
       flex-basis: 95%;
     }
 
diff --git a/client/src/plus/index.scss b/client/src/plus/index.scss
index f574a02c2491..f045d7e6b6fe 100644
--- a/client/src/plus/index.scss
+++ b/client/src/plus/index.scss
@@ -23,7 +23,7 @@
       position: relative;
       top: -0.2rem;
 
-      @media screen and (min-width: $screen-lg) {
+      @media (min-width: $screen-lg) {
         position: absolute;
         right: 10rem;
         top: 50%;
@@ -88,13 +88,13 @@
 .ai-help,
 .collections,
 .updates {
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     .container {
       max-width: 43rem;
     }
   }
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     .container {
       max-width: 52rem;
     }
diff --git a/client/src/plus/offer-overview/offer-hero/index.scss b/client/src/plus/offer-overview/offer-hero/index.scss
index 7cd8cef47939..b3de49994d0b 100644
--- a/client/src/plus/offer-overview/offer-hero/index.scss
+++ b/client/src/plus/offer-overview/offer-hero/index.scss
@@ -102,7 +102,7 @@ $text-stroke-width: 2px;
 
     .mandala-translate {
       transform: translate(10rem, -8rem) scale(1.2);
-      @media screen and (min-width: $screen-sm) {
+      @media (min-width: $screen-sm) {
         transform: translate(12rem, -8rem);
       }
     }
diff --git a/client/src/plus/offer-overview/offer-overview-feature/index.scss b/client/src/plus/offer-overview/offer-overview-feature/index.scss
index 5970d2d0ac2e..3d34eb5a6035 100644
--- a/client/src/plus/offer-overview/offer-overview-feature/index.scss
+++ b/client/src/plus/offer-overview/offer-overview-feature/index.scss
@@ -18,7 +18,7 @@
     padding: 4rem 1rem;
     width: 100%;
 
-    @media screen and (min-width: $screen-xl) {
+    @media (min-width: $screen-xl) {
       flex-direction: row;
     }
 
@@ -35,7 +35,7 @@
       box-shadow: 0 3px 22px #2b2a331a;
       height: 100%;
       max-width: 25rem;
-      @media screen and (min-width: $screen-xl) {
+      @media (min-width: $screen-xl) {
         max-width: min(50%, 20rem);
       }
     }
@@ -65,7 +65,7 @@
         margin-top: 0;
       }
 
-      @media screen and (min-width: $screen-xl) {
+      @media (min-width: $screen-xl) {
         align-items: initial;
         height: 100%;
         max-width: 50%;
@@ -78,7 +78,7 @@
 .offer-overview-feature:nth-child(even) {
   .wrapper {
     flex-direction: column;
-    @media screen and (min-width: $screen-xl) {
+    @media (min-width: $screen-xl) {
       flex-direction: row;
     }
   }
@@ -89,7 +89,7 @@
 
   .wrapper {
     flex-direction: column;
-    @media screen and (min-width: $screen-xl) {
+    @media (min-width: $screen-xl) {
       flex-direction: row-reverse;
     }
   }
diff --git a/client/src/plus/offer-overview/offer-overview-subscribe/index.scss b/client/src/plus/offer-overview/offer-overview-subscribe/index.scss
index 3d952803e537..851ef1f11130 100644
--- a/client/src/plus/offer-overview/offer-overview-subscribe/index.scss
+++ b/client/src/plus/offer-overview/offer-overview-subscribe/index.scss
@@ -8,7 +8,7 @@
     padding: 2rem 1rem;
     text-align: center;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       padding: 2rem 4rem;
     }
 
@@ -40,7 +40,7 @@
         display: none;
       }
 
-      @media screen and (min-width: 66rem) {
+      @media (min-width: 66rem) {
         align-items: stretch;
         flex-direction: row;
       }
diff --git a/client/src/plus/plus-docs/index.scss b/client/src/plus/plus-docs/index.scss
index f3aabbf73c01..b0821ab3badd 100644
--- a/client/src/plus/plus-docs/index.scss
+++ b/client/src/plus/plus-docs/index.scss
@@ -34,7 +34,7 @@
         font: var(--type-heading-h1-mobile);
         margin-bottom: 2rem;
 
-        @media screen and (min-width: $screen-md) {
+        @media (min-width: $screen-md) {
           font: var(--type-heading-h1);
         }
       }
diff --git a/client/src/plus/search-filter/index.scss b/client/src/plus/search-filter/index.scss
index 809d9c40352b..d1312552107a 100644
--- a/client/src/plus/search-filter/index.scss
+++ b/client/src/plus/search-filter/index.scss
@@ -44,7 +44,7 @@
   }
 }
 
-@media screen and (min-width: $screen-md) {
+@media (min-width: $screen-md) {
   .search-filter {
     flex-wrap: nowrap;
   }
diff --git a/client/src/site-search/index.scss b/client/src/site-search/index.scss
index c39827600646..dcb772ee23ad 100644
--- a/client/src/site-search/index.scss
+++ b/client/src/site-search/index.scss
@@ -9,7 +9,7 @@
   display: block;
 
   article {
-    @media screen and (max-width: $screen-md) {
+    @media (max-width: $screen-md) {
       display: flex;
       flex-direction: column;
     }
@@ -17,7 +17,7 @@
     .place {
       float: right;
       padding: 1rem;
-      @media screen and (max-width: $screen-md) {
+      @media (max-width: $screen-md) {
         align-self: center;
         float: none;
         order: 4;
diff --git a/client/src/site-search/search-results.scss b/client/src/site-search/search-results.scss
index b63bde4b63f5..101ac0698da8 100644
--- a/client/src/site-search/search-results.scss
+++ b/client/src/site-search/search-results.scss
@@ -21,7 +21,7 @@
 }
 
 .pagination {
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     display: flex;
     justify-content: space-between;
   }
@@ -71,7 +71,7 @@
     position: relative;
     top: -3px;
 
-    @media screen and (max-width: $screen-sm) {
+    @media (max-width: $screen-sm) {
       display: inline-block;
       margin: 0;
       margin-left: 0.25rem;
@@ -92,7 +92,7 @@
   margin: 4rem 0;
   word-wrap: break-word;
 
-  @media screen and (max-width: $screen-sm) {
+  @media (max-width: $screen-sm) {
     margin-bottom: 2.5rem;
   }
 }
@@ -105,7 +105,7 @@
     font-size: 1rem;
     margin: 0;
 
-    @media screen and (max-width: $screen-sm) {
+    @media (max-width: $screen-sm) {
       display: inline;
     }
   }
@@ -114,7 +114,7 @@
   .sort-option-list {
     display: inline-block;
 
-    @media screen and (max-width: $screen-sm) {
+    @media (max-width: $screen-sm) {
       margin-left: 1rem;
     }
 
diff --git a/client/src/ui/atoms/avatar/index.scss b/client/src/ui/atoms/avatar/index.scss
index 430773cda6eb..4d48929c037b 100644
--- a/client/src/ui/atoms/avatar/index.scss
+++ b/client/src/ui/atoms/avatar/index.scss
@@ -25,7 +25,7 @@
     */
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     margin: initial;
   }
 }
diff --git a/client/src/ui/atoms/modal/index.scss b/client/src/ui/atoms/modal/index.scss
index 7bdf832b2493..f6a8b113bda9 100644
--- a/client/src/ui/atoms/modal/index.scss
+++ b/client/src/ui/atoms/modal/index.scss
@@ -84,7 +84,7 @@ body.ReactModal__Body--open {
   }
 
   .mdn-form-item {
-    @media screen and (max-width: $screen-lg) {
+    @media (max-width: $screen-lg) {
       &:last-child {
         padding-bottom: 1.5rem;
       }
@@ -103,7 +103,7 @@ body.ReactModal__Body--open {
   }
 }
 
-@media screen and (min-width: $screen-lg) {
+@media (min-width: $screen-lg) {
   body.ReactModal__Body--open {
     overflow: unset;
   }
diff --git a/client/src/ui/atoms/search/index.scss b/client/src/ui/atoms/search/index.scss
index 7c13b61dab1d..7d935d13767f 100644
--- a/client/src/ui/atoms/search/index.scss
+++ b/client/src/ui/atoms/search/index.scss
@@ -8,7 +8,7 @@
     right: 0.5rem;
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     align-items: center;
     display: flex;
     gap: 0.5rem;
diff --git a/client/src/ui/atoms/signout/index.scss b/client/src/ui/atoms/signout/index.scss
index 4b9632264853..c6f247569ab4 100644
--- a/client/src/ui/atoms/signout/index.scss
+++ b/client/src/ui/atoms/signout/index.scss
@@ -3,7 +3,7 @@
 .signout-form {
   padding: 0.5rem;
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     border-top: 1px solid var(--border-primary);
   }
 }
diff --git a/client/src/ui/atoms/toast/index.scss b/client/src/ui/atoms/toast/index.scss
index 6a0c7cc6f82c..fafbadba14c7 100644
--- a/client/src/ui/atoms/toast/index.scss
+++ b/client/src/ui/atoms/toast/index.scss
@@ -41,7 +41,7 @@
     display: none;
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     &-verbose-text {
       display: inline;
     }
diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss
index bf3d9af91f29..897656669af2 100644
--- a/client/src/ui/base/_themes.scss
+++ b/client/src/ui/base/_themes.scss
@@ -263,7 +263,7 @@
   --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#small-light");
   --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#small-light");
   --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#small-light");
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#light");
     --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#light");
     --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#light");
@@ -542,7 +542,7 @@
   --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#small-dark");
   --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#small-dark");
   --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#small-dark");
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#dark");
     --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#dark");
     --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#dark");
diff --git a/client/src/ui/molecules/auth-container/index.scss b/client/src/ui/molecules/auth-container/index.scss
index 2bca211740d6..4c93355d7837 100644
--- a/client/src/ui/molecules/auth-container/index.scss
+++ b/client/src/ui/molecules/auth-container/index.scss
@@ -18,7 +18,7 @@
 
 .top-navigation-main {
   .auth-container {
-    @media screen and (max-width: #{$screen-lg - 1}) {
+    @media (max-width: #{$screen-lg - 1}) {
       align-items: center;
       justify-content: center;
       margin-bottom: 1rem;
diff --git a/client/src/ui/molecules/breadcrumbs/index.scss b/client/src/ui/molecules/breadcrumbs/index.scss
index 5054aad816ea..2f24ab9de1d6 100644
--- a/client/src/ui/molecules/breadcrumbs/index.scss
+++ b/client/src/ui/molecules/breadcrumbs/index.scss
@@ -67,7 +67,7 @@
     }
   }
 
-  @media screen and (min-width: $screen-xl) {
+  @media (min-width: $screen-xl) {
     li {
       display: inline-flex;
     }
diff --git a/client/src/ui/molecules/card/index.scss b/client/src/ui/molecules/card/index.scss
index 73ed5abb1326..4292f2428728 100644
--- a/client/src/ui/molecules/card/index.scss
+++ b/client/src/ui/molecules/card/index.scss
@@ -8,7 +8,7 @@
   max-width: 95%;
   padding: 0.5rem;
 
-  @media screen and (max-width: $screen-sm) {
+  @media (max-width: $screen-sm) {
     max-width: 340px;
   }
 
@@ -26,7 +26,7 @@
     line-height: 1.2;
     margin: 0.5rem 0;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       font-size: 1rem;
       margin-top: 0;
     }
@@ -37,7 +37,7 @@
     font-weight: var(--font-body-strong-weight);
     margin-bottom: 1rem;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       font-size: 1rem;
     }
   }
diff --git a/client/src/ui/molecules/grids/_document-page.scss b/client/src/ui/molecules/grids/_document-page.scss
index 97623596ae4c..6d52766210c3 100644
--- a/client/src/ui/molecules/grids/_document-page.scss
+++ b/client/src/ui/molecules/grids/_document-page.scss
@@ -27,7 +27,7 @@
     display: none;
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     display: grid;
     gap: 3rem;
     grid-template-areas: "sidebar main";
@@ -53,7 +53,7 @@
     }
   }
 
-  @media screen and (min-width: $screen-xl) {
+  @media (min-width: $screen-xl) {
     display: grid;
     gap: 3rem;
     grid-template-areas: "sidebar main toc";
diff --git a/client/src/ui/molecules/guides-menu/index.scss b/client/src/ui/molecules/guides-menu/index.scss
index c2bd15946970..42a234d2f98a 100644
--- a/client/src/ui/molecules/guides-menu/index.scss
+++ b/client/src/ui/molecules/guides-menu/index.scss
@@ -11,7 +11,7 @@
     display: none;
   }
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     .desktop-only {
       display: inherit;
     }
diff --git a/client/src/ui/molecules/main-menu/index.scss b/client/src/ui/molecules/main-menu/index.scss
index 8bf8b737b8b0..29913f4dbe63 100644
--- a/client/src/ui/molecules/main-menu/index.scss
+++ b/client/src/ui/molecules/main-menu/index.scss
@@ -12,12 +12,12 @@ ul.main-menu {
   &.show {
     display: block;
 
-    @media screen and (min-width: $screen-lg) {
+    @media (min-width: $screen-lg) {
       display: flex;
     }
   }
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     align-items: center;
     display: flex;
     justify-content: space-around;
@@ -40,13 +40,13 @@ ul.main-menu {
     }
   }
 
-  @media screen and (min-width: ($screen-xl)) {
+  @media (min-width: ($screen-xl)) {
     gap: 1rem;
   }
 }
 
 /* Enable hover interaction if javascript is not available */
-@media screen and (min-width: $screen-lg) {
+@media (min-width: $screen-lg) {
   ul.main-menu .submenu {
     display: none;
   }
diff --git a/client/src/ui/molecules/maintenance/index.scss b/client/src/ui/molecules/maintenance/index.scss
index 6e5bc172cad3..bb085e2184cb 100644
--- a/client/src/ui/molecules/maintenance/index.scss
+++ b/client/src/ui/molecules/maintenance/index.scss
@@ -10,7 +10,7 @@
     display: block;
     margin: 0 1rem;
     top: 2rem;
-    @media screen and (min-width: $screen-lg) {
+    @media (min-width: $screen-lg) {
       padding-top: 1rem;
       position: absolute;
     }
@@ -23,7 +23,7 @@
       padding: 1rem;
     }
   }
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     &:not(:focus-within):not(:hover) {
       .maintenance-info-container {
         border: 0 !important;
diff --git a/client/src/ui/molecules/plus-menu/index.scss b/client/src/ui/molecules/plus-menu/index.scss
index e028d0c2dc60..bdc55163ef3c 100644
--- a/client/src/ui/molecules/plus-menu/index.scss
+++ b/client/src/ui/molecules/plus-menu/index.scss
@@ -15,7 +15,7 @@
     }
   }
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     .mobile-only {
       display: none;
     }
diff --git a/client/src/ui/molecules/quote/index.scss b/client/src/ui/molecules/quote/index.scss
index c6525ad7cc8b..1c5986ae1636 100644
--- a/client/src/ui/molecules/quote/index.scss
+++ b/client/src/ui/molecules/quote/index.scss
@@ -7,7 +7,7 @@ blockquote.quote {
   margin: 2rem 0;
   padding: 2rem;
 
-  @media screen and (max-width: 40rem) {
+  @media (max-width: 40rem) {
     flex-wrap: wrap-reverse;
   }
 
diff --git a/client/src/ui/molecules/reference-menu/index.scss b/client/src/ui/molecules/reference-menu/index.scss
index 14863533f77b..1420a142333f 100644
--- a/client/src/ui/molecules/reference-menu/index.scss
+++ b/client/src/ui/molecules/reference-menu/index.scss
@@ -6,7 +6,7 @@
     display: none;
   }
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     .desktop-only {
       display: inherit;
     }
diff --git a/client/src/ui/molecules/search/index.scss b/client/src/ui/molecules/search/index.scss
index 94ea6080a45d..b9bd2cabe737 100644
--- a/client/src/ui/molecules/search/index.scss
+++ b/client/src/ui/molecules/search/index.scss
@@ -10,7 +10,7 @@
     position: relative;
     width: 100%;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       align-items: center;
       display: flex;
       gap: 0.5rem;
@@ -55,7 +55,7 @@
       }
     }
 
-    @media screen and (min-width: $screen-lg) {
+    @media (min-width: $screen-lg) {
       &:invalid {
         width: 1rem;
       }
@@ -234,7 +234,7 @@
     background: transparent;
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     right: 1.2rem;
     width: 1.5rem;
   }
diff --git a/client/src/ui/molecules/submenu/index.scss b/client/src/ui/molecules/submenu/index.scss
index b50aced84868..5bd1d7707f64 100644
--- a/client/src/ui/molecules/submenu/index.scss
+++ b/client/src/ui/molecules/submenu/index.scss
@@ -81,13 +81,13 @@
   }
 
   &.inline-submenu-lg {
-    @media screen and (min-width: $screen-lg) {
+    @media (min-width: $screen-lg) {
       @include not-inline-submenu();
     }
   }
 
   &:not(.inline-submenu-lg) {
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       @include not-inline-submenu();
     }
   }
@@ -105,7 +105,7 @@
     background: none;
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     border-bottom: 1px solid var(--border-primary);
   }
 }
@@ -122,7 +122,7 @@
 .submenu-item {
   font-size: var(--type-smaller-font-size);
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     // If there is sub-text associated with this heading, make it bold.
     &:not(:only-child) {
       font-weight: var(--font-body-strong-weight);
@@ -133,7 +133,7 @@
 .submenu-item-description {
   display: none;
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     display: block;
     font-size: var(--type-tiny-font-size);
     margin: 0.25rem 0 0;
diff --git a/client/src/ui/molecules/theme-switcher/index.scss b/client/src/ui/molecules/theme-switcher/index.scss
index ad4c220bf2c0..fcad8b8599dc 100644
--- a/client/src/ui/molecules/theme-switcher/index.scss
+++ b/client/src/ui/molecules/theme-switcher/index.scss
@@ -45,7 +45,7 @@
     --button-border-color: var(--button-secondary-border-focus);
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     border-bottom: 0;
     margin-bottom: 0;
 
@@ -90,7 +90,7 @@
     }
   }
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     > .button {
       .button-wrap:after {
         content: unset;
diff --git a/client/src/ui/molecules/user-menu/index.scss b/client/src/ui/molecules/user-menu/index.scss
index f3bf16f5d07b..d640a5af3b1d 100644
--- a/client/src/ui/molecules/user-menu/index.scss
+++ b/client/src/ui/molecules/user-menu/index.scss
@@ -21,13 +21,13 @@
     }
   }
 
-  @media screen and (max-width: $screen-lg) {
+  @media (max-width: $screen-lg) {
     .user-menu-toggle:hover {
       --button-bg: transparent;
     }
   }
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     /*
       The user menu button is shaped like an avatar and thus has some
       very specific focus and hover states.
diff --git a/client/src/ui/organisms/article-actions-container/index.scss b/client/src/ui/organisms/article-actions-container/index.scss
index e35d0a6aef18..5a69f6a11dcb 100644
--- a/client/src/ui/organisms/article-actions-container/index.scss
+++ b/client/src/ui/organisms/article-actions-container/index.scss
@@ -23,7 +23,7 @@
     display: none;
   }
 
-  @media screen and (max-width: $screen-md) {
+  @media (max-width: $screen-md) {
     .sidebar-button {
       align-items: center;
       align-self: stretch;
@@ -37,7 +37,7 @@
     }
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     position: static;
 
     .bookmark-button-container {
@@ -45,7 +45,7 @@
     }
   }
 
-  @media screen and (min-width: $screen-xxl) {
+  @media (min-width: $screen-xxl) {
     .container {
       padding-left: 1rem;
       padding-right: 1rem;
diff --git a/client/src/ui/organisms/article-actions/bookmark-menu/index.scss b/client/src/ui/organisms/article-actions/bookmark-menu/index.scss
index facf5cba14bf..0a9e2bf874af 100644
--- a/client/src/ui/organisms/article-actions/bookmark-menu/index.scss
+++ b/client/src/ui/organisms/article-actions/bookmark-menu/index.scss
@@ -18,7 +18,7 @@
     }
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     #bookmark-note {
       // clamp height to ensure dropdown doesn't go off screen
       // but set a minimum, so it doesn't become unusably small
diff --git a/client/src/ui/organisms/article-actions/index.scss b/client/src/ui/organisms/article-actions/index.scss
index df709e2d6123..18321bd2d06b 100644
--- a/client/src/ui/organisms/article-actions/index.scss
+++ b/client/src/ui/organisms/article-actions/index.scss
@@ -15,7 +15,7 @@
     display: block;
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     display: block;
 
     .article-actions-toggle {
@@ -24,7 +24,7 @@
   }
 
   /* Open state, mobile-only */
-  @media screen and (max-width: $screen-md) {
+  @media (max-width: $screen-md) {
     &.show-actions {
       background-color: var(--background-primary);
       color: var(--text-primary);
@@ -150,7 +150,7 @@
     }
   }
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     &.show {
       background-color: var(--background-secondary);
       border: 1px solid var(--border-primary);
@@ -198,7 +198,7 @@
   margin: 0;
   padding: 0;
 
-  @media screen and (min-width: $screen-md) {
+  @media (min-width: $screen-md) {
     display: flex;
     gap: 0.5rem;
 
diff --git a/client/src/ui/organisms/footer/index.scss b/client/src/ui/organisms/footer/index.scss
index 9e57b79c6980..c1c66e613a43 100644
--- a/client/src/ui/organisms/footer/index.scss
+++ b/client/src/ui/organisms/footer/index.scss
@@ -128,7 +128,7 @@
   }
 }
 
-@media screen and (min-width: $screen-sm) {
+@media (min-width: $screen-sm) {
   .page-footer {
     &-grid {
       display: grid;
@@ -187,7 +187,7 @@
   }
 }
 
-@media screen and (min-width: $screen-md) {
+@media (min-width: $screen-md) {
   .page-footer {
     &-grid {
       gap: 1rem;
@@ -211,7 +211,7 @@
   }
 }
 
-@media screen and (min-width: $screen-xxl) {
+@media (min-width: $screen-xxl) {
   .page-footer {
     &-grid {
       gap: 2.5rem;
diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss
index a164b8a2b897..5812dacfd326 100644
--- a/client/src/ui/organisms/placement/index.scss
+++ b/client/src/ui/organisms/placement/index.scss
@@ -92,7 +92,7 @@ section.place {
     margin: 0 auto;
     width: 100%;
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       grid-template-areas: "pong cta note" "pong cta no";
       grid-template-columns: fit-content(100%) auto fit-content(100%);
     }
@@ -204,7 +204,7 @@ section.place.hp-main {
     position: initial;
   }
 
-  @media screen and (max-width: #{$screen-md - 1}) {
+  @media (max-width: #{$screen-md - 1}) {
     display: none;
   }
 
@@ -283,7 +283,7 @@ div.empty-place {
       margin-top: auto;
     }
 
-    @media screen and (max-width: $screen-xl) {
+    @media (max-width: $screen-xl) {
       grid-template-areas:
         "pong note"
         "pong no";
@@ -291,7 +291,7 @@ div.empty-place {
       grid-template-rows: auto 2rem;
     }
 
-    @media screen and (max-width: $screen-lg) {
+    @media (max-width: $screen-lg) {
       grid-template-areas:
         "pong pong"
         "note no";
diff --git a/client/src/ui/organisms/top-navigation-main/index.scss b/client/src/ui/organisms/top-navigation-main/index.scss
index 1c06b6170163..437c286f1417 100644
--- a/client/src/ui/organisms/top-navigation-main/index.scss
+++ b/client/src/ui/organisms/top-navigation-main/index.scss
@@ -40,7 +40,7 @@
     margin-bottom: 1.5rem;
   }
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     .theme-toggle {
       align-self: initial;
       margin-bottom: initial;
@@ -92,7 +92,7 @@
       align-self: flex-start;
     }
 
-    @media screen and (max-width: #{$screen-lg - 1}) {
+    @media (max-width: #{$screen-lg - 1}) {
       &.button {
         --button-color: var(--text-secondary);
         --button-padding: 0;
@@ -118,7 +118,7 @@
       }
     }
 
-    @media screen and (min-width: $screen-lg) {
+    @media (min-width: $screen-lg) {
       border-radius: var(--elem-radius);
       border-top: none;
       padding: 0.5rem;
@@ -162,7 +162,7 @@
     display: none;
   }
 
-  @media screen and (min-width: $screen-lg) {
+  @media (min-width: $screen-lg) {
     align-items: center;
     display: flex;
     flex: 1;
diff --git a/client/src/ui/organisms/top-navigation/index.scss b/client/src/ui/organisms/top-navigation/index.scss
index 42bfd7b08b92..477e520d9ecd 100644
--- a/client/src/ui/organisms/top-navigation/index.scss
+++ b/client/src/ui/organisms/top-navigation/index.scss
@@ -13,7 +13,7 @@
     flex-flow: row wrap;
     gap: var(--gutter);
 
-    @media screen and (min-width: $screen-md) {
+    @media (min-width: $screen-md) {
       background-color: transparent;
     }
   }
@@ -40,7 +40,7 @@
   }
 }
 
-@media screen and (min-width: $screen-lg) {
+@media (min-width: $screen-lg) {
   .main-menu-toggle {
     display: none;
   }