From 851809fc6f1eb6373bf547ee9d24e4d543ffe7f9 Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Wed, 21 Jul 2021 15:59:34 +0200
Subject: [PATCH] Split mediaqueries for not messing up with --root so far

---
 .../src/jsMain/resources/app.css              | 49 +++++++++++++------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/examples/web_grid_animation/src/jsMain/resources/app.css b/examples/web_grid_animation/src/jsMain/resources/app.css
index c6f0854b1a..91f74a450f 100644
--- a/examples/web_grid_animation/src/jsMain/resources/app.css
+++ b/examples/web_grid_animation/src/jsMain/resources/app.css
@@ -18,6 +18,37 @@ li:nth-child(2n-1){
   :root {
     --columns: 5;
   }
+}
+@media (min-width:900px){
+  :root {
+    --columns: 7;
+  }
+}
+@media (min-width:1200px){
+  :root {
+    --columns: 9;
+  }
+}
+@media (min-width:1500px){
+  :root {
+    --columns: 11;
+  }
+}
+@media (min-width:1800px){
+  :root {
+    --columns: 13;
+  }
+}
+
+@media (min-width:2100px){
+  :root {
+    --columns: 15;
+  }
+}
+
+
+
+@media (min-width:600px){
   li:nth-child(2n-1){
     grid-column-start:auto;
   }
@@ -26,9 +57,6 @@ li:nth-child(2n-1){
   }
 }
 @media (min-width:900px){
-  :root {
-    --columns: 7;
-  }
   li:nth-child(4n-3){
     grid-column-start:auto;
   }
@@ -37,9 +65,6 @@ li:nth-child(2n-1){
   }
 }
 @media (min-width:1200px){
-  :root {
-    --columns: 9;
-  }
   li:nth-child(6n-5){
     grid-column-start:auto;
   }
@@ -48,9 +73,6 @@ li:nth-child(2n-1){
   }
 }
 @media (min-width:1500px){
-  :root {
-    --columns: 11;
-  }
   li:nth-child(8n-7){
     grid-column-start:auto;
   }
@@ -58,10 +80,8 @@ li:nth-child(2n-1){
     grid-column-start:2;
   }
 }
+
 @media (min-width:1800px){
-  :root {
-    --columns: 13;
-  }
   li:nth-child(10n-9){
     grid-column-start:auto;
   }
@@ -70,16 +90,13 @@ li:nth-child(2n-1){
   }
 
 }
+
 @media (min-width:2100px){
-  :root {
-    --columns: 15;
-  }
   li:nth-child(12n-11){
     grid-column-start:auto;
   }
   li:nth-child(14n-13){
     grid-column-start:2;
   }
-
 }