diff --git a/ts/domtools.css.breakpoints.ts b/ts/domtools.css.breakpoints.ts
index e83e3d8..dd9fd01 100644
--- a/ts/domtools.css.breakpoints.ts
+++ b/ts/domtools.css.breakpoints.ts
@@ -11,10 +11,10 @@ export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
 
 export const cssForTablet = (cssArg: CSSResult) => {
   return unsafeCSS(`
-    @container wccToolsViewport (min-width: ${tablet}px) {
+    @container wccToolsViewport (max-width: ${tablet}px) {
       ${cssArg.cssText}
     }
-    @media (min-width: ${tablet}px) {
+    @media (max-width: ${tablet}px) {
       ${cssArg.cssText}
     }
   `);
@@ -22,10 +22,10 @@ export const cssForTablet = (cssArg: CSSResult) => {
 
 export const cssForPhablet = (cssArg: CSSResult) => {
   return unsafeCSS(`
-    @container wccToolsViewport (min-width: ${phablet}px) {
+    @container wccToolsViewport (max-width: ${phablet}px) {
       ${cssArg.cssText}
     }
-    @media (min-width: ${phablet}px) {
+    @media (max-width: ${phablet}px) {
       ${cssArg.cssText}
     }
   `);
@@ -33,10 +33,10 @@ export const cssForPhablet = (cssArg: CSSResult) => {
 
 export const cssForPhone = (cssArg: CSSResult) => {
   return unsafeCSS(`
-    @container wccToolsViewport (min-width: ${phone}px) {
+    @container wccToolsViewport (max-width: ${phone}px) {
       ${cssArg.cssText}
     }
-    @media (min-width: ${phone}px) {
+    @media (max-width: ${phone}px) {
       ${cssArg.cssText}
     }
   `);