From b32d8170c38f9ac07b9c75466c3ecf58c06dcd31 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Sat, 17 Feb 2024 21:45:55 +0000
Subject: [PATCH] feat: use `rem` for media and container queries (#2218)

feat: use rem
---
 .changeset/wild-balloons-kneel.md             |  7 ++
 packages/core/__tests__/atomic-rule.test.ts   | 32 +++----
 packages/core/__tests__/breakpoints.test.ts   | 90 +++++++++----------
 packages/core/__tests__/complex-rule.test.ts  |  4 +-
 packages/core/__tests__/composition.test.ts   |  4 +-
 packages/core/__tests__/conditions.test.ts    |  4 +-
 packages/core/__tests__/global-css.test.ts    |  4 +-
 packages/core/__tests__/prefix.test.ts        |  2 +-
 .../core/__tests__/recipe-nesting.test.ts     |  2 +-
 packages/core/__tests__/recipe.test.ts        |  4 +-
 .../core/__tests__/rule-processor.test.ts     | 28 +++---
 .../core/__tests__/sort-style-rules.test.ts   | 14 +--
 packages/core/__tests__/static-css.test.ts    | 14 +--
 packages/core/__tests__/style-decoder.test.ts | 78 ++++++++--------
 packages/core/src/breakpoints.ts              |  6 +-
 packages/core/src/conditions.ts               |  4 +-
 .../__tests__/generate-token.test.ts          |  4 +-
 packages/parser/__tests__/import-map.test.ts  |  6 +-
 packages/parser/__tests__/output.test.ts      | 18 ++--
 .../parser/__tests__/preset-patterns.test.ts  | 18 ++--
 .../styled-system/types/conditions.d.ts       | 74 +++++++--------
 21 files changed, 212 insertions(+), 205 deletions(-)
 create mode 100644 .changeset/wild-balloons-kneel.md

diff --git a/.changeset/wild-balloons-kneel.md b/.changeset/wild-balloons-kneel.md
new file mode 100644
index 000000000..0cb760764
--- /dev/null
+++ b/.changeset/wild-balloons-kneel.md
@@ -0,0 +1,7 @@
+---
+'@pandacss/generator': minor
+'@pandacss/parser': minor
+'@pandacss/core': minor
+---
+
+Switch from `em` to `rem` for breakpoints and container queries to prevent side effects.
diff --git a/packages/core/__tests__/atomic-rule.test.ts b/packages/core/__tests__/atomic-rule.test.ts
index 972bf1d03..83faca2d9 100644
--- a/packages/core/__tests__/atomic-rule.test.ts
+++ b/packages/core/__tests__/atomic-rule.test.ts
@@ -71,7 +71,7 @@ describe('atomic / with basic style object', () => {
           width: 50px;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:w_60px {
             width: 60px;
       }
@@ -87,7 +87,7 @@ describe('atomic / with basic style object', () => {
           width: 50px;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:w_60px {
             width: 60px;
       }
@@ -107,7 +107,7 @@ describe('atomic / with basic style object', () => {
           margin-left: calc(var(--spacing-4) * -1);
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           [dir=ltr] .ltr\\:sm\\:ml_4 {
             margin-left: var(--spacing-4);
       }
@@ -146,19 +146,19 @@ describe('atomic / with basic style object', () => {
       }),
     ).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           [dir=rtl] .sm\\:rtl\\:top_20px {
             top: 20px;
       }
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:hover\\:top_50px:is(:hover, [data-hover]) {
             top: 50px;
       }
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           .lg\\:top_120px {
             top: 120px;
       }
@@ -178,7 +178,7 @@ describe('atomic / with basic style object', () => {
           left: 20px;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:left_40px {
             left: 40px;
       }
@@ -216,13 +216,13 @@ describe('atomic / with nesting scope', () => {
           font: sans;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           [dir=ltr] [data-theme=dark] .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p:is(:hover, [data-hover]),[dir=ltr] .dark .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p:is(:hover, [data-hover]),[dir=ltr] .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p:is(:hover, [data-hover]).dark,[dir=ltr] .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p:is(:hover, [data-hover])[data-theme=dark] {
             font: serif;
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .\\[\\&_\\>_p\\]\\:md\\:left_40px > p {
             left: 40px;
       }
@@ -245,13 +245,13 @@ describe('atomic / with nesting scope', () => {
           background: red400;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           input:hover .\\[input\\:hover_\\&\\]\\:sm\\:fs_14px {
             font-size: 14px;
       }
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           input:hover .\\[input\\:hover_\\&\\]\\:lg\\:fs_18px {
             font-size: 18px;
       }
@@ -279,7 +279,7 @@ describe('atomic / with nesting scope', () => {
           left: 40px;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .\\[\\&\\:\\:placeholder\\]\\:sm\\:text_left::placeholder {
             text-align: left;
       }
@@ -305,7 +305,7 @@ describe('atomic / with nesting scope', () => {
       }
 
         @media base {
-          @media screen and (min-width: 40em) {
+          @media screen and (min-width: 40rem) {
             .\\[\\@media_base\\]\\:sm\\:text_left {
               text-align: left;
       }
@@ -342,7 +342,7 @@ describe('atomic / with grouped conditions styles', () => {
           color: var(--colors-pink-400);
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           [data-theme=dark] .hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover]),.dark .hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover]),.hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover]).dark,.hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover])[data-theme=dark] {
             background: var(--colors-red-300);
       }
@@ -358,7 +358,7 @@ describe('atomic / with grouped conditions styles', () => {
       }),
     ).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .hover\\:disabled\\:sm\\:bg_red\\.300:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
             background: var(--colors-red-300);
       }
@@ -386,7 +386,7 @@ describe('atomic / with grouped conditions styles', () => {
       }
 
         @media base {
-          @media screen and (min-width: 40em) {
+          @media screen and (min-width: 40rem) {
             .\\[\\@media_base\\]\\:\\[\\&\\:hover\\]\\:sm\\:text_left:hover {
               text-align: left;
       }
diff --git a/packages/core/__tests__/breakpoints.test.ts b/packages/core/__tests__/breakpoints.test.ts
index 25abd7846..26373c733 100644
--- a/packages/core/__tests__/breakpoints.test.ts
+++ b/packages/core/__tests__/breakpoints.test.ts
@@ -19,32 +19,32 @@ describe('Breakpoints', () => {
         [
           "sm",
           {
-            "max": "47.9975em",
-            "min": "40em",
+            "max": "47.9975rem",
+            "min": "40rem",
             "name": "sm",
           },
         ],
         [
           "md",
           {
-            "max": "63.9975em",
-            "min": "48em",
+            "max": "63.9975rem",
+            "min": "48rem",
             "name": "md",
           },
         ],
         [
           "lg",
           {
-            "max": "79.9975em",
-            "min": "64em",
+            "max": "79.9975rem",
+            "min": "64rem",
             "name": "lg",
           },
         ],
         [
           "xl",
           {
-            "max": "95.9975em",
-            "min": "80em",
+            "max": "95.9975rem",
+            "min": "80rem",
             "name": "xl",
           },
         ],
@@ -52,7 +52,7 @@ describe('Breakpoints', () => {
           "2xl",
           {
             "max": undefined,
-            "min": "96em",
+            "min": "96rem",
             "name": "2xl",
           },
         ],
@@ -63,27 +63,27 @@ describe('Breakpoints', () => {
       {
         "2xl": {
           "max": undefined,
-          "min": "96em",
+          "min": "96rem",
           "name": "2xl",
         },
         "lg": {
-          "max": "79.9975em",
-          "min": "64em",
+          "max": "79.9975rem",
+          "min": "64rem",
           "name": "lg",
         },
         "md": {
-          "max": "63.9975em",
-          "min": "48em",
+          "max": "63.9975rem",
+          "min": "48rem",
           "name": "md",
         },
         "sm": {
-          "max": "47.9975em",
-          "min": "40em",
+          "max": "47.9975rem",
+          "min": "40rem",
           "name": "sm",
         },
         "xl": {
-          "max": "95.9975em",
-          "min": "80em",
+          "max": "95.9975rem",
+          "min": "80rem",
           "name": "xl",
         },
       }
@@ -91,31 +91,31 @@ describe('Breakpoints', () => {
 
     expect(bp.ranges).toMatchInlineSnapshot(`
       {
-        "2xl": "screen and (min-width: 96em)",
-        "2xlDown": "screen and (max-width: 95.9975em)",
-        "2xlOnly": "screen and (min-width: 96em)",
-        "lg": "screen and (min-width: 64em)",
-        "lgDown": "screen and (max-width: 63.9975em)",
-        "lgOnly": "screen and (min-width: 64em) and (max-width: 79.9975em)",
-        "lgTo2xl": "screen and (min-width: 64em) and (max-width: 95.9975em)",
-        "lgToXl": "screen and (min-width: 64em) and (max-width: 79.9975em)",
-        "md": "screen and (min-width: 48em)",
-        "mdDown": "screen and (max-width: 47.9975em)",
-        "mdOnly": "screen and (min-width: 48em) and (max-width: 63.9975em)",
-        "mdTo2xl": "screen and (min-width: 48em) and (max-width: 95.9975em)",
-        "mdToLg": "screen and (min-width: 48em) and (max-width: 63.9975em)",
-        "mdToXl": "screen and (min-width: 48em) and (max-width: 79.9975em)",
-        "sm": "screen and (min-width: 40em)",
-        "smDown": "screen and (max-width: 39.9975em)",
-        "smOnly": "screen and (min-width: 40em) and (max-width: 47.9975em)",
-        "smTo2xl": "screen and (min-width: 40em) and (max-width: 95.9975em)",
-        "smToLg": "screen and (min-width: 40em) and (max-width: 63.9975em)",
-        "smToMd": "screen and (min-width: 40em) and (max-width: 47.9975em)",
-        "smToXl": "screen and (min-width: 40em) and (max-width: 79.9975em)",
-        "xl": "screen and (min-width: 80em)",
-        "xlDown": "screen and (max-width: 79.9975em)",
-        "xlOnly": "screen and (min-width: 80em) and (max-width: 95.9975em)",
-        "xlTo2xl": "screen and (min-width: 80em) and (max-width: 95.9975em)",
+        "2xl": "screen and (min-width: 96rem)",
+        "2xlDown": "screen and (max-width: 95.9975rem)",
+        "2xlOnly": "screen and (min-width: 96rem)",
+        "lg": "screen and (min-width: 64rem)",
+        "lgDown": "screen and (max-width: 63.9975rem)",
+        "lgOnly": "screen and (min-width: 64rem) and (max-width: 79.9975rem)",
+        "lgTo2xl": "screen and (min-width: 64rem) and (max-width: 95.9975rem)",
+        "lgToXl": "screen and (min-width: 64rem) and (max-width: 79.9975rem)",
+        "md": "screen and (min-width: 48rem)",
+        "mdDown": "screen and (max-width: 47.9975rem)",
+        "mdOnly": "screen and (min-width: 48rem) and (max-width: 63.9975rem)",
+        "mdTo2xl": "screen and (min-width: 48rem) and (max-width: 95.9975rem)",
+        "mdToLg": "screen and (min-width: 48rem) and (max-width: 63.9975rem)",
+        "mdToXl": "screen and (min-width: 48rem) and (max-width: 79.9975rem)",
+        "sm": "screen and (min-width: 40rem)",
+        "smDown": "screen and (max-width: 39.9975rem)",
+        "smOnly": "screen and (min-width: 40rem) and (max-width: 47.9975rem)",
+        "smTo2xl": "screen and (min-width: 40rem) and (max-width: 95.9975rem)",
+        "smToLg": "screen and (min-width: 40rem) and (max-width: 63.9975rem)",
+        "smToMd": "screen and (min-width: 40rem) and (max-width: 47.9975rem)",
+        "smToXl": "screen and (min-width: 40rem) and (max-width: 79.9975rem)",
+        "xl": "screen and (min-width: 80rem)",
+        "xlDown": "screen and (max-width: 79.9975rem)",
+        "xlOnly": "screen and (min-width: 80rem) and (max-width: 95.9975rem)",
+        "xlTo2xl": "screen and (min-width: 80rem) and (max-width: 95.9975rem)",
       }
     `)
   })
@@ -131,7 +131,7 @@ describe('Breakpoints', () => {
 
     expect(css).toMatchInlineSnapshot(`
       "
-          @media screen and (min-width: 48em){
+          @media screen and (min-width: 48rem){
               .foo{
                   color: red;
               }
@@ -151,7 +151,7 @@ describe('Breakpoints', () => {
 
     expect(css).toMatchInlineSnapshot(`
       "
-          @media screen and (max-width: 47.9975em){
+          @media screen and (max-width: 47.9975rem){
               .foo{
                   color: red;
               }
diff --git a/packages/core/__tests__/complex-rule.test.ts b/packages/core/__tests__/complex-rule.test.ts
index 4328a5b45..4d5c4559b 100644
--- a/packages/core/__tests__/complex-rule.test.ts
+++ b/packages/core/__tests__/complex-rule.test.ts
@@ -19,8 +19,8 @@ describe('complex-rule', () => {
           color: green500;
       }
 
-        @media screen and (min-width: 40em) {
-          @media screen and (min-width: 48em) {
+        @media screen and (min-width: 40rem) {
+          @media screen and (min-width: 48rem) {
             [data-theme=dark] .dark\\:sm\\:md\\:text_red200,.dark .dark\\:sm\\:md\\:text_red200,.dark\\:sm\\:md\\:text_red200.dark,.dark\\:sm\\:md\\:text_red200[data-theme=dark] {
               color: red200;
       }
diff --git a/packages/core/__tests__/composition.test.ts b/packages/core/__tests__/composition.test.ts
index 5c8676ab4..0c24291cf 100644
--- a/packages/core/__tests__/composition.test.ts
+++ b/packages/core/__tests__/composition.test.ts
@@ -16,7 +16,7 @@ describe('compositions', () => {
         "className": "textStyle_headline.h2",
         "layer": "compositions",
         "styles": {
-          "@media screen and (min-width: 64em)": {
+          "@media screen and (min-width: 64rem)": {
             "fontSize": "2rem",
           },
           "fontSize": "1.5rem",
@@ -54,7 +54,7 @@ describe('compositions', () => {
             font-weight: var(--font-weights-bold);
       }
 
-          @media screen and (min-width: 64em) {
+          @media screen and (min-width: 64rem) {
             .textStyle_headline\\.h2 {
               font-size: 2rem;
       }
diff --git a/packages/core/__tests__/conditions.test.ts b/packages/core/__tests__/conditions.test.ts
index 19f45e133..7c00ea1db 100644
--- a/packages/core/__tests__/conditions.test.ts
+++ b/packages/core/__tests__/conditions.test.ts
@@ -18,9 +18,9 @@ describe('Conditions', () => {
     expect(css.getRaw('sm')).toMatchInlineSnapshot(`
       {
         "name": "breakpoint",
-        "params": "screen and (min-width: 40em)",
+        "params": "screen and (min-width: 40rem)",
         "raw": "sm",
-        "rawValue": "@media screen and (min-width: 40em)",
+        "rawValue": "@media screen and (min-width: 40rem)",
         "type": "at-rule",
         "value": "sm",
       }
diff --git a/packages/core/__tests__/global-css.test.ts b/packages/core/__tests__/global-css.test.ts
index 6ad219359..4c91f99b5 100644
--- a/packages/core/__tests__/global-css.test.ts
+++ b/packages/core/__tests__/global-css.test.ts
@@ -97,13 +97,13 @@ describe('Global css', () => {
           color: pink;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .btn {
             font-size: 12px;
       }
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           .btn {
             width: 90px;
       }
diff --git a/packages/core/__tests__/prefix.test.ts b/packages/core/__tests__/prefix.test.ts
index 3cd2fa4a4..f9cb6ca26 100644
--- a/packages/core/__tests__/prefix.test.ts
+++ b/packages/core/__tests__/prefix.test.ts
@@ -23,7 +23,7 @@ describe('atomic-rule / prefix', () => {
 
     expect(backend({ color: { sm: 'red' } })).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .tw-geqOyW {
             color: red;
       }
diff --git a/packages/core/__tests__/recipe-nesting.test.ts b/packages/core/__tests__/recipe-nesting.test.ts
index 2a5b5c6a4..3c00a2073 100644
--- a/packages/core/__tests__/recipe-nesting.test.ts
+++ b/packages/core/__tests__/recipe-nesting.test.ts
@@ -77,7 +77,7 @@ test('[recipe] direct nesting / recipe ruleset', () => {
         color: var(--colors-red-200);
     }
 
-      @media screen and (min-width: 48em) {
+      @media screen and (min-width: 48rem) {
         .text--variant_sm:first-child:hover {
           color: var(--colors-gray-300);
     }
diff --git a/packages/core/__tests__/recipe.test.ts b/packages/core/__tests__/recipe.test.ts
index 610c69697..f54181065 100644
--- a/packages/core/__tests__/recipe.test.ts
+++ b/packages/core/__tests__/recipe.test.ts
@@ -59,7 +59,7 @@ describe('recipe ruleset', () => {
           font-weight: 800;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:textStyle--size_h2 {
             letter-spacing: -0.03em;
             font-size: 3rem;
@@ -258,7 +258,7 @@ describe('recipe ruleset', () => {
           background-color: darkblue;
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           .lg\\:buttonStyle--variant_outline {
             border: 1px solid blue;
             color: blue;
diff --git a/packages/core/__tests__/rule-processor.test.ts b/packages/core/__tests__/rule-processor.test.ts
index b45a28ff8..a154aee97 100644
--- a/packages/core/__tests__/rule-processor.test.ts
+++ b/packages/core/__tests__/rule-processor.test.ts
@@ -351,7 +351,7 @@ describe('rule processor', () => {
           color: orange;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:w_2 {
             width: var(--sizes-2);
       }
@@ -366,25 +366,25 @@ describe('rule processor', () => {
       }
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:hover\\:bg_green:is(:hover, [data-hover]) {
             background-color: green;
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .hover\\:md\\:fs_lg:is(:hover, [data-hover]) {
             font-size: var(--font-sizes-lg);
       }
       }
 
-        @media screen and (min-width: 80em) {
+        @media screen and (min-width: 80rem) {
           .xl\\:w_3 {
             width: var(--sizes-3);
       }
       }
 
-        @media screen and (min-width: 80em) {
+        @media screen and (min-width: 80rem) {
           .target .\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:xl\\:text_pink[data-attr='test']:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
             color: pink;
       }
@@ -441,7 +441,7 @@ describe('rule processor', () => {
           background-color: darkblue;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:buttonStyle--size_md {
             height: 3rem;
             min-width: 3rem;
@@ -681,7 +681,7 @@ describe('rule processor', () => {
           font-size: var(--font-sizes-sm);
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:checkbox__control--size_md {
             width: var(--sizes-10);
             height: var(--sizes-10);
@@ -1469,7 +1469,7 @@ describe('js to css', () => {
           background-color: blue;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:bg_red {
             background: red;
       }
@@ -1484,37 +1484,37 @@ describe('js to css', () => {
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           [data-theme=light] .md\\:light\\:focus\\:bg_red:is(:focus, [data-focus]),.light .md\\:light\\:focus\\:bg_red:is(:focus, [data-focus]),.md\\:light\\:focus\\:bg_red:is(:focus, [data-focus]).light,.md\\:light\\:focus\\:bg_red:is(:focus, [data-focus])[data-theme=light] {
             background: red;
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           [data-theme=light] .md\\:light\\:focus\\:bg_blue:is(:focus, [data-focus]),.light .md\\:light\\:focus\\:bg_blue:is(:focus, [data-focus]),.md\\:light\\:focus\\:bg_blue:is(:focus, [data-focus]).light,.md\\:light\\:focus\\:bg_blue:is(:focus, [data-focus])[data-theme=light] {
             background-color: blue;
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           [data-theme=light] .md\\:light\\:hover\\:bg_red:is(:hover, [data-hover]),.light .md\\:light\\:hover\\:bg_red:is(:hover, [data-hover]),.md\\:light\\:hover\\:bg_red:is(:hover, [data-hover]).light,.md\\:light\\:hover\\:bg_red:is(:hover, [data-hover])[data-theme=light] {
             background: red;
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           [data-theme=light] .md\\:light\\:hover\\:bg_blue:is(:hover, [data-hover]),.light .md\\:light\\:hover\\:bg_blue:is(:hover, [data-hover]),.md\\:light\\:hover\\:bg_blue:is(:hover, [data-hover]).light,.md\\:light\\:hover\\:bg_blue:is(:hover, [data-hover])[data-theme=light] {
             background-color: blue;
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           [data-theme=light] .md\\:light\\:active\\:bg_red:is(:active, [data-active]),.light .md\\:light\\:active\\:bg_red:is(:active, [data-active]),.md\\:light\\:active\\:bg_red:is(:active, [data-active]).light,.md\\:light\\:active\\:bg_red:is(:active, [data-active])[data-theme=light] {
             background: red;
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           [data-theme=light] .md\\:light\\:active\\:bg_blue:is(:active, [data-active]),.light .md\\:light\\:active\\:bg_blue:is(:active, [data-active]),.md\\:light\\:active\\:bg_blue:is(:active, [data-active]).light,.md\\:light\\:active\\:bg_blue:is(:active, [data-active])[data-theme=light] {
             background-color: blue;
       }
diff --git a/packages/core/__tests__/sort-style-rules.test.ts b/packages/core/__tests__/sort-style-rules.test.ts
index 42530b4d4..2230b0c85 100644
--- a/packages/core/__tests__/sort-style-rules.test.ts
+++ b/packages/core/__tests__/sort-style-rules.test.ts
@@ -90,7 +90,7 @@ describe('sort style rules', () => {
           font-size: 4px;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:fs_5 {
             font-size: 5px;
       }
@@ -99,7 +99,7 @@ describe('sort style rules', () => {
       }
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:hover\\:bg_green:is(:hover, [data-hover]) {
             background-color: green;
       }
@@ -151,7 +151,7 @@ describe('sort style rules', () => {
           font-size: 4px;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:fs_5 {
             font-size: 5px;
       }
@@ -166,13 +166,13 @@ describe('sort style rules', () => {
       }
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:hover\\:bg_green:is(:hover, [data-hover]) {
             background-color: green;
       }
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:hover\\:bg_purple:is(:hover, [data-hover]) {
             background-color: purple;
       }
@@ -223,7 +223,7 @@ describe('sort style rules', () => {
           font-size: 2px;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .btn--size_sm {
             font-size: 3px;
       }
@@ -280,7 +280,7 @@ describe('sort style rules', () => {
           font-size: 2.2px;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .btn--size_sm {
             font-size: 3px;
       }
diff --git a/packages/core/__tests__/static-css.test.ts b/packages/core/__tests__/static-css.test.ts
index 82641d30f..9305d12b5 100644
--- a/packages/core/__tests__/static-css.test.ts
+++ b/packages/core/__tests__/static-css.test.ts
@@ -116,7 +116,7 @@ describe('static-css', () => {
           padding: 0 0.5rem;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:buttonStyle--size_sm {
             height: 2.5rem;
             min-width: 2.5rem;
@@ -129,7 +129,7 @@ describe('static-css', () => {
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:buttonStyle--size_sm {
             height: 2.5rem;
             min-width: 2.5rem;
@@ -196,7 +196,7 @@ describe('static-css', () => {
           color: var(--colors-color-palette-200);
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:m_20px {
             margin: 20px;
       }
@@ -214,7 +214,7 @@ describe('static-css', () => {
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:m_20px {
             margin: 20px;
       }
@@ -708,7 +708,7 @@ describe('static-css', () => {
           background-color: darkblue;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:buttonStyle--size_md {
             height: 3rem;
             min-width: 3rem;
@@ -784,7 +784,7 @@ describe('static-css', () => {
           font-size: var(--font-sizes-lg);
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           .lg\\:checkbox__control--size_lg {
             width: 12px;
             height: 12px;
@@ -1169,7 +1169,7 @@ describe('static-css', () => {
           align-items: center;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:pos_relative {
             position: relative;
       }
diff --git a/packages/core/__tests__/style-decoder.test.ts b/packages/core/__tests__/style-decoder.test.ts
index 86c0f0676..3482d4f8c 100644
--- a/packages/core/__tests__/style-decoder.test.ts
+++ b/packages/core/__tests__/style-decoder.test.ts
@@ -94,9 +94,9 @@ describe('style decoder', () => {
           "conditions": [
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 48em)",
+              "params": "screen and (min-width: 48rem)",
               "raw": "md",
-              "rawValue": "@media screen and (min-width: 48em)",
+              "rawValue": "@media screen and (min-width: 48rem)",
               "type": "at-rule",
               "value": "md",
             },
@@ -110,7 +110,7 @@ describe('style decoder', () => {
           "layer": undefined,
           "result": {
             ".md\\:text_red": {
-              "@media screen and (min-width: 48em)": {
+              "@media screen and (min-width: 48rem)": {
                 "color": "red",
               },
             },
@@ -475,9 +475,9 @@ describe('style decoder', () => {
           "conditions": [
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 40em)",
+              "params": "screen and (min-width: 40rem)",
               "raw": "sm",
-              "rawValue": "@media screen and (min-width: 40em)",
+              "rawValue": "@media screen and (min-width: 40rem)",
               "type": "at-rule",
               "value": "sm",
             },
@@ -491,7 +491,7 @@ describe('style decoder', () => {
           "layer": undefined,
           "result": {
             ".sm\\:w_2": {
-              "@media screen and (min-width: 40em)": {
+              "@media screen and (min-width: 40rem)": {
                 "width": "var(--sizes-2)",
               },
             },
@@ -502,9 +502,9 @@ describe('style decoder', () => {
           "conditions": [
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 40em)",
+              "params": "screen and (min-width: 40rem)",
               "raw": "sm",
-              "rawValue": "@media screen and (min-width: 40em)",
+              "rawValue": "@media screen and (min-width: 40rem)",
               "type": "at-rule",
               "value": "sm",
             },
@@ -518,7 +518,7 @@ describe('style decoder', () => {
           "layer": undefined,
           "result": {
             ".sm\\:text_yellow": {
-              "@media screen and (min-width: 40em)": {
+              "@media screen and (min-width: 40rem)": {
                 "color": "yellow",
               },
             },
@@ -529,9 +529,9 @@ describe('style decoder', () => {
           "conditions": [
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 40em)",
+              "params": "screen and (min-width: 40rem)",
               "raw": "sm",
-              "rawValue": "@media screen and (min-width: 40em)",
+              "rawValue": "@media screen and (min-width: 40rem)",
               "type": "at-rule",
               "value": "sm",
             },
@@ -545,7 +545,7 @@ describe('style decoder', () => {
           "layer": undefined,
           "result": {
             ".sm\\:fs_sm": {
-              "@media screen and (min-width: 40em)": {
+              "@media screen and (min-width: 40rem)": {
                 "fontSize": "var(--font-sizes-sm)",
               },
             },
@@ -556,9 +556,9 @@ describe('style decoder', () => {
           "conditions": [
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 40em)",
+              "params": "screen and (min-width: 40rem)",
               "raw": "sm",
-              "rawValue": "@media screen and (min-width: 40em)",
+              "rawValue": "@media screen and (min-width: 40rem)",
               "type": "at-rule",
               "value": "sm",
             },
@@ -572,7 +572,7 @@ describe('style decoder', () => {
           "layer": undefined,
           "result": {
             ".sm\\:bg_red": {
-              "@media screen and (min-width: 40em)": {
+              "@media screen and (min-width: 40rem)": {
                 "backgroundColor": "red",
               },
             },
@@ -583,9 +583,9 @@ describe('style decoder', () => {
           "conditions": [
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 80em)",
+              "params": "screen and (min-width: 80rem)",
               "raw": "xl",
-              "rawValue": "@media screen and (min-width: 80em)",
+              "rawValue": "@media screen and (min-width: 80rem)",
               "type": "at-rule",
               "value": "xl",
             },
@@ -599,7 +599,7 @@ describe('style decoder', () => {
           "layer": undefined,
           "result": {
             ".xl\\:w_3": {
-              "@media screen and (min-width: 80em)": {
+              "@media screen and (min-width: 80rem)": {
                 "width": "var(--sizes-3)",
               },
             },
@@ -615,9 +615,9 @@ describe('style decoder', () => {
             },
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 40em)",
+              "params": "screen and (min-width: 40rem)",
               "raw": "sm",
-              "rawValue": "@media screen and (min-width: 40em)",
+              "rawValue": "@media screen and (min-width: 40rem)",
               "type": "at-rule",
               "value": "sm",
             },
@@ -632,7 +632,7 @@ describe('style decoder', () => {
           "result": {
             ".sm\\:hover\\:bg_green": {
               "&:is(:hover, [data-hover])": {
-                "@media screen and (min-width: 40em)": {
+                "@media screen and (min-width: 40rem)": {
                   "backgroundColor": "green",
                 },
               },
@@ -649,9 +649,9 @@ describe('style decoder', () => {
             },
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 48em)",
+              "params": "screen and (min-width: 48rem)",
               "raw": "md",
-              "rawValue": "@media screen and (min-width: 48em)",
+              "rawValue": "@media screen and (min-width: 48rem)",
               "type": "at-rule",
               "value": "md",
             },
@@ -666,7 +666,7 @@ describe('style decoder', () => {
           "result": {
             ".hover\\:md\\:fs_lg": {
               "&:is(:hover, [data-hover])": {
-                "@media screen and (min-width: 48em)": {
+                "@media screen and (min-width: 48rem)": {
                   "fontSize": "var(--font-sizes-lg)",
                 },
               },
@@ -693,9 +693,9 @@ describe('style decoder', () => {
             },
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 80em)",
+              "params": "screen and (min-width: 80rem)",
               "raw": "xl",
-              "rawValue": "@media screen and (min-width: 80em)",
+              "rawValue": "@media screen and (min-width: 80rem)",
               "type": "at-rule",
               "value": "xl",
             },
@@ -712,7 +712,7 @@ describe('style decoder', () => {
               "&[data-attr='test']": {
                 "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])": {
                   ".target &": {
-                    "@media screen and (min-width: 80em)": {
+                    "@media screen and (min-width: 80rem)": {
                       "color": "pink",
                     },
                   },
@@ -879,9 +879,9 @@ describe('style decoder', () => {
           "conditions": [
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 48em)",
+              "params": "screen and (min-width: 48rem)",
               "raw": "md",
-              "rawValue": "@media screen and (min-width: 48em)",
+              "rawValue": "@media screen and (min-width: 48rem)",
               "type": "at-rule",
               "value": "md",
             },
@@ -896,7 +896,7 @@ describe('style decoder', () => {
           "layer": undefined,
           "result": {
             ".md\\:buttonStyle--size_md": {
-              "@media screen and (min-width: 48em)": {
+              "@media screen and (min-width: 48rem)": {
                 "height": "3rem",
                 "minWidth": "3rem",
                 "padding": "0 0.75rem",
@@ -1614,9 +1614,9 @@ describe('style decoder', () => {
           "conditions": [
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 48em)",
+              "params": "screen and (min-width: 48rem)",
               "raw": "md",
-              "rawValue": "@media screen and (min-width: 48em)",
+              "rawValue": "@media screen and (min-width: 48rem)",
               "type": "at-rule",
               "value": "md",
             },
@@ -1632,7 +1632,7 @@ describe('style decoder', () => {
           "layer": undefined,
           "result": {
             ".md\\:checkbox__root--size_md": {
-              "@media screen and (min-width: 48em)": {},
+              "@media screen and (min-width: 48rem)": {},
             },
           },
         },
@@ -1641,9 +1641,9 @@ describe('style decoder', () => {
           "conditions": [
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 48em)",
+              "params": "screen and (min-width: 48rem)",
               "raw": "md",
-              "rawValue": "@media screen and (min-width: 48em)",
+              "rawValue": "@media screen and (min-width: 48rem)",
               "type": "at-rule",
               "value": "md",
             },
@@ -1659,7 +1659,7 @@ describe('style decoder', () => {
           "layer": undefined,
           "result": {
             ".md\\:checkbox__control--size_md": {
-              "@media screen and (min-width: 48em)": {
+              "@media screen and (min-width: 48rem)": {
                 "height": "var(--sizes-10)",
                 "width": "var(--sizes-10)",
               },
@@ -1671,9 +1671,9 @@ describe('style decoder', () => {
           "conditions": [
             {
               "name": "breakpoint",
-              "params": "screen and (min-width: 48em)",
+              "params": "screen and (min-width: 48rem)",
               "raw": "md",
-              "rawValue": "@media screen and (min-width: 48em)",
+              "rawValue": "@media screen and (min-width: 48rem)",
               "type": "at-rule",
               "value": "md",
             },
@@ -1689,7 +1689,7 @@ describe('style decoder', () => {
           "layer": undefined,
           "result": {
             ".md\\:checkbox__label--size_md": {
-              "@media screen and (min-width: 48em)": {
+              "@media screen and (min-width: 48rem)": {
                 "fontSize": "var(--font-sizes-md)",
               },
             },
diff --git a/packages/core/src/breakpoints.ts b/packages/core/src/breakpoints.ts
index f22c02f28..259570dcd 100644
--- a/packages/core/src/breakpoints.ts
+++ b/packages/core/src/breakpoints.ts
@@ -1,4 +1,4 @@
-import { capitalize, toEm, toPx } from '@pandacss/shared'
+import { capitalize, toRem, toPx } from '@pandacss/shared'
 import type { RawCondition } from '@pandacss/types'
 import type { Root } from 'postcss'
 
@@ -86,7 +86,7 @@ type Entries = [string, BreakpointEntry][]
 
 function adjust(value: string | null | undefined) {
   const computedMax = parseFloat(toPx(value!) ?? '') - 0.04
-  return toEm(`${computedMax}px`) as string
+  return toRem(`${computedMax}px`) as string
 }
 
 function sortBreakpoints(breakpoints: Record<string, string>): Entries {
@@ -105,7 +105,7 @@ function sortBreakpoints(breakpoints: Record<string, string>): Entries {
         max = adjust(max)
       }
 
-      return [name, { name, min: toEm(min), max }]
+      return [name, { name, min: toRem(min), max }]
     })
 }
 
diff --git a/packages/core/src/conditions.ts b/packages/core/src/conditions.ts
index 8d9bd0ca1..1e79576c0 100644
--- a/packages/core/src/conditions.ts
+++ b/packages/core/src/conditions.ts
@@ -1,5 +1,5 @@
 import { logger } from '@pandacss/logger'
-import { isBaseCondition, toEm, withoutSpace } from '@pandacss/shared'
+import { isBaseCondition, toRem, withoutSpace } from '@pandacss/shared'
 import type { ConditionType, Dict, RawCondition } from '@pandacss/types'
 import { Breakpoints } from './breakpoints'
 import { parseCondition } from './parse-condition'
@@ -48,7 +48,7 @@ export class Conditions {
 
     containerNames.forEach((name) => {
       Object.entries(containerSizes).forEach(([size, value]) => {
-        const _value = toEm(value) ?? value
+        const _value = toRem(value) ?? value
         containers[`@${name}/${size}`] = {
           type: 'at-rule',
           name: 'container',
diff --git a/packages/generator/__tests__/generate-token.test.ts b/packages/generator/__tests__/generate-token.test.ts
index 400f4efcf..5b90b6a14 100644
--- a/packages/generator/__tests__/generate-token.test.ts
+++ b/packages/generator/__tests__/generate-token.test.ts
@@ -471,13 +471,13 @@ describe('generator', () => {
           --colors-surface: #p-b
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           [data-color=pastel]:where([data-theme=dark], .dark) {
             --colors-surface: #p-d
                       }
                   }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           :where(html) {
             --spacing-gutter: var(--spacing-5)
               }
diff --git a/packages/parser/__tests__/import-map.test.ts b/packages/parser/__tests__/import-map.test.ts
index b621fd852..dfc9d0245 100644
--- a/packages/parser/__tests__/import-map.test.ts
+++ b/packages/parser/__tests__/import-map.test.ts
@@ -133,19 +133,19 @@ describe('config.importMap', () => {
           flex-direction: column;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:flex_row {
             flex-direction: row;
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:px_6 {
             padding-inline: var(--spacing-6);
       }
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           .lg\\:px_8 {
             padding-inline: var(--spacing-8);
       }
diff --git a/packages/parser/__tests__/output.test.ts b/packages/parser/__tests__/output.test.ts
index f9fd05ecc..01d83de2f 100644
--- a/packages/parser/__tests__/output.test.ts
+++ b/packages/parser/__tests__/output.test.ts
@@ -39,7 +39,7 @@ describe('extract to css output pipeline', () => {
           color: blue;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:text_red {
             color: red;
       }
@@ -204,7 +204,7 @@ describe('extract to css output pipeline', () => {
           background-color: var(--some-bg);
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:p_4 {
             padding: var(--spacing-4);
       }
@@ -216,15 +216,15 @@ describe('extract to css output pipeline', () => {
       }
       }
 
-        @media screen and (min-width: 48em) {
-          @media screen and (min-width: 40em) {
+        @media screen and (min-width: 48rem) {
+          @media screen and (min-width: 40rem) {
             .md\\:sm\\:m_4px {
               margin: 4px;
       }
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           [data-theme=dark] .md\\:dark\\:hover\\:m_-2:is(:hover, [data-hover]),.dark .md\\:dark\\:hover\\:m_-2:is(:hover, [data-hover]),.md\\:dark\\:hover\\:m_-2:is(:hover, [data-hover]).dark,.md\\:dark\\:hover\\:m_-2:is(:hover, [data-hover])[data-theme=dark] {
             margin: calc(var(--spacing-2) * -1);
       }
@@ -2518,7 +2518,7 @@ describe('extract to css output pipeline', () => {
           padding-block: var(--spacing-2);
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:py_2 {
             padding-block: var(--spacing-2);
       }
@@ -2527,7 +2527,7 @@ describe('extract to css output pipeline', () => {
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:py_4 {
             padding-block: var(--spacing-4);
       }
@@ -2741,7 +2741,7 @@ describe('extract to css output pipeline', () => {
             color: blue;
       }
 
-          @media screen and (min-width: 40em) {
+          @media screen and (min-width: 40rem) {
             .card {
               color: red;
       }
@@ -2760,7 +2760,7 @@ describe('extract to css output pipeline', () => {
           font-size: 2px;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:fs_5 {
             font-size: 5px;
       }
diff --git a/packages/parser/__tests__/preset-patterns.test.ts b/packages/parser/__tests__/preset-patterns.test.ts
index 522f979da..823e41782 100644
--- a/packages/parser/__tests__/preset-patterns.test.ts
+++ b/packages/parser/__tests__/preset-patterns.test.ts
@@ -1202,13 +1202,13 @@ describe('preset patterns', () => {
           padding-inline: var(--spacing-4);
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:px_6 {
             padding-inline: var(--spacing-6);
       }
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           .lg\\:px_8 {
             padding-inline: var(--spacing-8);
       }
@@ -1266,13 +1266,13 @@ describe('preset patterns', () => {
           color: var(--colors-blue-100);
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:px_6 {
             padding-inline: var(--spacing-6);
       }
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           .lg\\:px_8 {
             padding-inline: var(--spacing-8);
       }
@@ -1613,7 +1613,7 @@ describe('preset patterns', () => {
           font-size: var(--font-sizes-lg);
       }
 
-        @container sidebar (min-width: 24em) {
+        @container sidebar (min-width: 24rem) {
           .\\@sidebar\\/sm\\:fs_md {
             font-size: var(--font-sizes-md);
       }
@@ -1686,7 +1686,7 @@ describe('preset patterns', () => {
           font-size: var(--font-sizes-lg);
       }
 
-        @container sidebar (min-width: 24em) {
+        @container sidebar (min-width: 24rem) {
           .\\@sidebar\\/sm\\:fs_md {
             font-size: var(--font-sizes-md);
       }
@@ -1759,7 +1759,7 @@ describe('preset patterns', () => {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:col-span_span_2 {
             grid-column: span 2;
       }
@@ -1768,7 +1768,7 @@ describe('preset patterns', () => {
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:col-span_span_3 {
             grid-column: span 3;
       }
@@ -1937,7 +1937,7 @@ describe('staticCss', () => {
           align-items: center;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:pos_relative {
             position: relative;
       }
diff --git a/packages/studio/styled-system/types/conditions.d.ts b/packages/studio/styled-system/types/conditions.d.ts
index 85de044e7..749bd9a55 100644
--- a/packages/studio/styled-system/types/conditions.d.ts
+++ b/packages/studio/styled-system/types/conditions.d.ts
@@ -178,79 +178,79 @@ export interface Conditions {
 	"_horizontal": string
 	/** `&[data-orientation=vertical]` */
 	"_vertical": string
-	/** `@media screen and (min-width: 40em)` */
+	/** `@media screen and (min-width: 40rem)` */
 	"sm": string
-	/** `@media screen and (min-width: 40em) and (max-width: 47.9975em)` */
+	/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
 	"smOnly": string
-	/** `@media screen and (max-width: 39.9975em)` */
+	/** `@media screen and (max-width: 39.9975rem)` */
 	"smDown": string
-	/** `@media screen and (min-width: 48em)` */
+	/** `@media screen and (min-width: 48rem)` */
 	"md": string
-	/** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */
+	/** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */
 	"mdOnly": string
-	/** `@media screen and (max-width: 47.9975em)` */
+	/** `@media screen and (max-width: 47.9975rem)` */
 	"mdDown": string
-	/** `@media screen and (min-width: 64em)` */
+	/** `@media screen and (min-width: 64rem)` */
 	"lg": string
-	/** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */
+	/** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
 	"lgOnly": string
-	/** `@media screen and (max-width: 63.9975em)` */
+	/** `@media screen and (max-width: 63.9975rem)` */
 	"lgDown": string
-	/** `@media screen and (min-width: 80em)` */
+	/** `@media screen and (min-width: 80rem)` */
 	"xl": string
-	/** `@media screen and (min-width: 80em) and (max-width: 95.9975em)` */
+	/** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */
 	"xlOnly": string
-	/** `@media screen and (max-width: 79.9975em)` */
+	/** `@media screen and (max-width: 79.9975rem)` */
 	"xlDown": string
-	/** `@media screen and (min-width: 96em)` */
+	/** `@media screen and (min-width: 96rem)` */
 	"2xl": string
-	/** `@media screen and (min-width: 96em)` */
+	/** `@media screen and (min-width: 96rem)` */
 	"2xlOnly": string
-	/** `@media screen and (max-width: 95.9975em)` */
+	/** `@media screen and (max-width: 95.9975rem)` */
 	"2xlDown": string
-	/** `@media screen and (min-width: 40em) and (max-width: 47.9975em)` */
+	/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
 	"smToMd": string
-	/** `@media screen and (min-width: 40em) and (max-width: 63.9975em)` */
+	/** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */
 	"smToLg": string
-	/** `@media screen and (min-width: 40em) and (max-width: 79.9975em)` */
+	/** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */
 	"smToXl": string
-	/** `@media screen and (min-width: 40em) and (max-width: 95.9975em)` */
+	/** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */
 	"smTo2xl": string
-	/** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */
+	/** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */
 	"mdToLg": string
-	/** `@media screen and (min-width: 48em) and (max-width: 79.9975em)` */
+	/** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */
 	"mdToXl": string
-	/** `@media screen and (min-width: 48em) and (max-width: 95.9975em)` */
+	/** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */
 	"mdTo2xl": string
-	/** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */
+	/** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
 	"lgToXl": string
-	/** `@media screen and (min-width: 64em) and (max-width: 95.9975em)` */
+	/** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */
 	"lgTo2xl": string
-	/** `@media screen and (min-width: 80em) and (max-width: 95.9975em)` */
+	/** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */
 	"xlTo2xl": string
-	/** `@container  (min-width: 20em)` */
+	/** `@container  (min-width: 20rem)` */
 	"@/xs": string
-	/** `@container  (min-width: 24em)` */
+	/** `@container  (min-width: 24rem)` */
 	"@/sm": string
-	/** `@container  (min-width: 28em)` */
+	/** `@container  (min-width: 28rem)` */
 	"@/md": string
-	/** `@container  (min-width: 32em)` */
+	/** `@container  (min-width: 32rem)` */
 	"@/lg": string
-	/** `@container  (min-width: 36em)` */
+	/** `@container  (min-width: 36rem)` */
 	"@/xl": string
-	/** `@container  (min-width: 42em)` */
+	/** `@container  (min-width: 42rem)` */
 	"@/2xl": string
-	/** `@container  (min-width: 48em)` */
+	/** `@container  (min-width: 48rem)` */
 	"@/3xl": string
-	/** `@container  (min-width: 56em)` */
+	/** `@container  (min-width: 56rem)` */
 	"@/4xl": string
-	/** `@container  (min-width: 64em)` */
+	/** `@container  (min-width: 64rem)` */
 	"@/5xl": string
-	/** `@container  (min-width: 72em)` */
+	/** `@container  (min-width: 72rem)` */
 	"@/6xl": string
-	/** `@container  (min-width: 80em)` */
+	/** `@container  (min-width: 80rem)` */
 	"@/7xl": string
-	/** `@container  (min-width: 90em)` */
+	/** `@container  (min-width: 90rem)` */
 	"@/8xl": string
 	/** The base (=no conditions) styles to apply  */
 	"base": string