Switch to ranged media with queries.

assets/css/components/_button.css

@@ -123,7 +123,7 @@ textarea {
 }
 
 /* For forms on mobile with single field add space between it and the submit button. */
-@media (min-width: 666px) {
+@media (width >= 666px) {
   input:only-of-type {
     &:has(+ [type='submit']) {
       margin-inline-end: 0.5rem;

assets/css/components/_flex-group.css

@@ -10,7 +10,7 @@
   }
 }
 
-@media (min-width: 666px) {
+@media (width >= 666px) {
   .flex-group--2 > * {
     flex-basis: calc(100% / 2 - var(--flex-gap));
     flex-grow: 0;

assets/css/components/_tables.css

@@ -1,7 +1,7 @@
 .zebra-table {
   --table-cell-padding: 0.5rem;
 
-  @media (max-width: 666px) {
+  @media (width < 666px) {
     --table-cell-padding: 0.3rem;
   }
 
@@ -32,7 +32,7 @@
 .responsive-table {
   --table-gap: 0.5rem;
 
-  @media (max-width: 666px) {
+  @media (width < 666px) {
     th {
       display: none;
     }