diff --git a/.changeset/afraid-jars-occur.md b/.changeset/afraid-jars-occur.md
new file mode 100644
index 0000000000..cae783f901
--- /dev/null
+++ b/.changeset/afraid-jars-occur.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Support fractional viewport sizes for `max-width` media queries
diff --git a/.changeset/serious-emus-worry.md b/.changeset/serious-emus-worry.md
new file mode 100644
index 0000000000..4560cb20d6
--- /dev/null
+++ b/.changeset/serious-emus-worry.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Support fractional viewport sizes for the `hide` utilities
diff --git a/src/layout/layout.scss b/src/layout/layout.scss
index 1ce15b9b26..8b8a7a7adc 100644
--- a/src/layout/layout.scss
+++ b/src/layout/layout.scss
@@ -6,18 +6,18 @@
   --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
   --Layout-gutter: 16px;
 
-  @media (max-width: calc(#{$width-sm} - 1px)) {
+  @media (max-width: calc(#{$width-sm} - 0.02px)) {
     @include flow-as-row;
   }
 
   &.Layout--flowRow-until-md {
-    @media (max-width: calc(#{$width-md} - 1px)) {
+    @media (max-width: calc(#{$width-md} - 0.02px)) {
       @include flow-as-row;
     }
   }
 
   &.Layout--flowRow-until-lg {
-    @media (max-width: calc(#{$width-lg} - 1px)) {
+    @media (max-width: calc(#{$width-lg} - 0.02px)) {
       @include flow-as-row;
     }
   }
diff --git a/src/popover/popover.scss b/src/popover/popover.scss
index defcc6a88f..7385eee07e 100644
--- a/src/popover/popover.scss
+++ b/src/popover/popover.scss
@@ -196,7 +196,7 @@
 // Responsive Popover
 // For < md it will show full-width anchored to the bottom
 
-@media (max-width: ($width-md - 1px)) {
+@media (max-width: ($width-md - 0.02px)) {
   .Popover {
     position: fixed;
     top: auto !important;
diff --git a/src/utilities/visibility-display.scss b/src/utilities/visibility-display.scss
index 61c6f5f836..8d8dd5b157 100644
--- a/src/utilities/visibility-display.scss
+++ b/src/utilities/visibility-display.scss
@@ -14,19 +14,19 @@
 
 // Hide utilities for each breakpoint
 // Each hide utility only applies to one breakpoint range.
-@media (max-width: $width-sm - 1px) {
+@media (max-width: $width-sm - 0.02px) {
   .hide-sm {
     display: none !important;
   }
 }
 
-@media (min-width: $width-sm) and (max-width: $width-md - 1px) {
+@media (min-width: $width-sm) and (max-width: $width-md - 0.02px) {
   .hide-md {
     display: none !important;
   }
 }
 
-@media (min-width: $width-md) and (max-width: $width-lg - 1px) {
+@media (min-width: $width-md) and (max-width: $width-lg - 0.02px) {
   .hide-lg {
     display: none !important;
   }