fix: use more specific media queries

packages/styles/src/mixins/_media.scss

@@ -0,0 +1,17 @@
+@mixin min($device-size) {
+  @media screen and (min-width: $device-size) {
+    @content;
+  }
+}
+
+@mixin max($device-size) {
+  @media screen and (max-width: ($device-size - 0.1)) {
+    @content;
+  }
+}
+
+@mixin between($min-size, $max-size) {
+  @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.1)) {
+    @content;
+  }
+}

packages/styles/src/tokens/semantic/_device.scss

@@ -2,17 +2,18 @@
 
 @use './core';
 @use './../../mixins/tokens';
+@use './../../mixins/media';
 
 :root {
-  @media (max-width: 599.9px) {
+  @include media.max(600px) {
     @include tokens.from(device.$post-mobile);
   }
 
-  @media (min-width: 600px) {
+  @include media.between(600px, 1024px) {
     @include tokens.from(device.$post-tablet);
   }
 
-  @media (min-width: 1024px) {
+  @include media.min(1024px) {
     @include tokens.from(device.$post-desktop);
   }
 }