Use vars

hectahertz · web-flow · commit a3afb40726fd · 2025-10-31T13:31:05.000Z
diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css
@@ -551,7 +551,7 @@ body[data-page-layout-dragging='true'] * {
     }
   }
 
-  @media screen and (min-width: 768px) {
+  @media (--viewportRange-regular) {
     &:where([data-position-regular='start']) {
       /* stylelint-disable-next-line primer/spacing */
       margin-left: var(--spacing);
@@ -624,7 +624,7 @@ body[data-page-layout-dragging='true'] * {
     }
   }
 
-  @media screen and (min-width: 768px) {
+  @media (--viewportRange-regular) {
     &:where([data-position-regular='start']) {
       /* stylelint-disable-next-line primer/spacing */
       margin-top: var(--spacing);

Original file line number	Diff line number	Diff line change
`@@ -551,7 +551,7 @@ body[data-page-layout-dragging='true'] * {`
`551`	`551`	`}`
`552`	`552`	`}`
`553`	`553`
`554`		`- @media screen and (min-width: 768px) {`
	`554`	`+ @media (--viewportRange-regular) {`
`555`	`555`	`&:where([data-position-regular='start']) {`
`556`	`556`	`/* stylelint-disable-next-line primer/spacing */`
`557`	`557`	`margin-left: var(--spacing);`
`@@ -624,7 +624,7 @@ body[data-page-layout-dragging='true'] * {`
`624`	`624`	`}`
`625`	`625`	`}`
`626`	`626`
`627`		`- @media screen and (min-width: 768px) {`
	`627`	`+ @media (--viewportRange-regular) {`
`628`	`628`	`&:where([data-position-regular='start']) {`
`629`	`629`	`/* stylelint-disable-next-line primer/spacing */`
`630`	`630`	`margin-top: var(--spacing);`