diff --git a/src/index.scss b/src/index.scss
index a7d15c14b9..3d429d4ce8 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -328,9 +328,9 @@
   max-width: 640px;
   margin: 0 auto;
 
-  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+  @media (--pgn-size-breakpoint-max-width-xs) {
     flex-direction: column;
-    gap: $spacer;
+    gap: var(--pgn-spacing-spacer-base);
   }
 
   .previous-button,
@@ -345,7 +345,7 @@
   .next-button {
     flex-basis: 75%;
 
-     @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+     @media (--pgn-size-breakpoint-max-width-xs) {
        flex-basis: 100%;
      }
   }
@@ -353,7 +353,7 @@
   .previous-button {
     flex-basis: 25%;
 
-     @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+     @media (--pgn-size-breakpoint-max-width-xs) {
        flex-basis: 100%;
      }
   }
@@ -365,7 +365,7 @@
 
   .next-button,
   .previous-button {
-    @media (min-width: map-get($grid-breakpoints, "md")) {
+    @media (--pgn-size-breakpoint-min-width-md) {
       flex-basis: auto;
       min-width: 8rem;
     }