Fix: Some style is not applied if it is between two viewport sizes.

This is the alternative implementation as mentioned in the PR jgthms#3990.

Related issue: jgthms#3961

Author: YorikHansen

sass/utilities/mixins.scss

@@ -272,19 +272,19 @@
 }
 
 @mixin until($device) {
-  @media screen and (max-width: ($device - 1px)) {
+  @media screen and (max-width: ($device - 0.02px)) {
     @content;
   }
 }
 
 @mixin between($from, $until) {
-  @media screen and (min-width: $from) and (max-width: ($until - 1px)) {
+  @media screen and (min-width: $from) and (max-width: ($until - 0.02px)) {
     @content;
   }
 }
 
 @mixin mobile {
-  @media screen and (max-width: (iv.$tablet - 1px)) {
+  @media screen and (max-width: (iv.$tablet - 0.02px)) {
     @content;
   }
 }
@@ -296,13 +296,13 @@
 }
 
 @mixin tablet-only {
-  @media screen and (min-width: iv.$tablet) and (max-width: (iv.$desktop - 1px)) {
+  @media screen and (min-width: iv.$tablet) and (max-width: (iv.$desktop - 0.02px)) {
     @content;
   }
 }
 
 @mixin touch {
-  @media screen and (max-width: (iv.$desktop - 1px)) {
+  @media screen and (max-width: (iv.$desktop - 0.02px)) {
     @content;
   }
 }
@@ -315,15 +315,15 @@
 
 @mixin desktop-only {
   @if iv.$widescreen-enabled {
-    @media screen and (min-width: iv.$desktop) and (max-width: (iv.$widescreen - 1px)) {
+    @media screen and (min-width: iv.$desktop) and (max-width: (iv.$widescreen - 0.02px)) {
       @content;
     }
   }
 }
 
 @mixin until-widescreen {
   @if iv.$widescreen-enabled {
-    @media screen and (max-width: (iv.$widescreen - 1px)) {
+    @media screen and (max-width: (iv.$widescreen - 0.02px)) {
       @content;
     }
   }
@@ -339,15 +339,15 @@
 
 @mixin widescreen-only {
   @if iv.$widescreen-enabled and iv.$fullhd-enabled {
-    @media screen and (min-width: iv.$widescreen) and (max-width: (iv.$fullhd - 1px)) {
+    @media screen and (min-width: iv.$widescreen) and (max-width: (iv.$fullhd - 0.02px)) {
       @content;
     }
   }
 }
 
 @mixin until-fullhd {
   @if iv.$fullhd-enabled {
-    @media screen and (max-width: (iv.$fullhd - 1px)) {
+    @media screen and (max-width: (iv.$fullhd - 0.02px)) {
       @content;
     }
   }
@@ -391,7 +391,7 @@
 }
 
 @mixin container-until($name, $width) {
-  @container #{$name} (max-width: #{$width - 1px}) {
+  @container #{$name} (max-width: #{$width - 0.02px}) {
     @content;
   }
 }