diff --git a/README.md b/README.md
index ffea27a..638aaa5 100644
--- a/README.md
+++ b/README.md
@@ -73,8 +73,6 @@ You can find all of them in the browser's page inspector, but here is the list w
     --accent-contrast-color: black; /* mainly uses for text on the accent backgrounds but not limited */
     --color: white; /* text color, also some other text use the variable in color mixing */
     --border-color: rgba(255, 255, 255, .1); /* border color */
-    --phone: "max-width: 684px"; /* phone breakpoint */
-    --tablet: "max-width: 900px"; /* tablet breakpoint */
     --article-link-color: var(inherit); /* for you, who want to colorize your article links */
 
     /* code syntax */
@@ -82,6 +80,11 @@ You can find all of them in the browser's page inspector, but here is the list w
     --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); 
     --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
     --syntax-value-color: color-mix(in srgb, var(--accent), white);
+    
+    /* breakpoints */
+    /* unfortunately, native CSS variables don't support media queries, so use SCSS vars instead */
+    $phone: 684px;
+    $tablet: 900px;
   }
 ```
 
diff --git a/demoSite/content/posts/css-vars.md b/demoSite/content/posts/css-vars.md
index 9cf0db2..971fd9b 100644
--- a/demoSite/content/posts/css-vars.md
+++ b/demoSite/content/posts/css-vars.md
@@ -44,14 +44,17 @@ You can find all of them in the browser's page inspector, but here is the list w
     --accent-contrast-color: black; /* mainly uses for text on the accent backgrounds but not limited */
     --color: white; /* text color, also some other text use the variable in color mixing */
     --border-color: rgba(255, 255, 255, .1); /* border color */
-    --phone: "max-width: 684px"; /* phone breakpoint */
-    --tablet: "max-width: 900px"; /* tablet breakpoint */
 
     /* code syntax */
     /* take a look at themes/re-terminal/assets/css/syntax.scss to understand in detail which color stands for */
     --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); 
     --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
     --syntax-value-color: color-mix(in srgb, var(--accent), white);
+
+    /* breakpoints */
+    /* unfortunately, native CSS variables don't support media queries, so use SCSS vars instead */
+    $phone: 684px;
+    $tablet: 900px;
   }
 ```
 
diff --git a/demoSite/content/showcase.md b/demoSite/content/showcase.md
index a88c7e9..7597e15 100644
--- a/demoSite/content/showcase.md
+++ b/demoSite/content/showcase.md
@@ -28,7 +28,7 @@ pre {
   font-size: 1rem;
   overflow: auto;
 
-  @media (--phone) {
+  @media ($phone) {
     white-space: pre-wrap;
     word-wrap: break-word;
   }