diff --git a/.changeset/nervous-guests-cheer.md b/.changeset/nervous-guests-cheer.md
new file mode 100644
index 00000000000..21b8b58b134
--- /dev/null
+++ b/.changeset/nervous-guests-cheer.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update Pagination CSS syntax to help with parsing downstream
diff --git a/packages/react/src/Pagination/Pagination.module.css b/packages/react/src/Pagination/Pagination.module.css
index a0dd8de6eed..1f16c3281df 100644
--- a/packages/react/src/Pagination/Pagination.module.css
+++ b/packages/react/src/Pagination/Pagination.module.css
@@ -7,7 +7,7 @@
   font-style: normal;
   /* stylelint-disable-next-line primer/typography */
   line-height: 1;
-  color: var(----fgColor-default);
+  color: var(--fgColor-default);
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
@@ -128,7 +128,7 @@
   text-align: center;
 }
 
-@media ((max-width: calc(768px - 0.02px))) {
+@media screen and (--viewportRange-narrow) {
   .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {
     display: none;
   }
@@ -142,7 +142,7 @@
   }
 }
 
-@media ((min-width: 768px)) {
+@media screen and (--viewportRange-regular) {
   .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) {
     display: none;
   }
@@ -156,7 +156,7 @@
   }
 }
 
-@media ((min-width: 1400px)) {
+@media screen and (--viewportRange-wide) {
   .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) {
     display: none;
   }