Invert CSS logic

markavenue · Aug 16, 2023 · 2a42c98 · 2a42c98
1 parent efa405c
commit 2a42c98
Showing 1 changed file with 17 additions and 24 deletions.
diff --git a/src/components/home-page/services-tabs/ServicesTabs.module.css b/src/components/home-page/services-tabs/ServicesTabs.module.css
@@ -1,25 +1,19 @@
 .root {
   display: flex;
-  flex-direction: column;
   max-width: 980px;
   margin: 24px auto;
   padding: 24px 0;
 }
 
 .list {
+  margin: 36px 0;
   display: flex;
-  flex-direction: row;
-  width: 100%;
-}
-
-.trigger {
-  flex: 1;
-  padding-bottom: 13px;
-  padding-top: 13px;
+  flex-direction: column;
+  flex: 0 0 auto;
 }
 
 .icon {
-  display: initial;
+  display: none;
 }
 
 .icon svg {
@@ -33,41 +27,40 @@
   fill: currentColor;
 }
 
-.label {
-  display: none;
+.content {
+  width: 100%;
 }
 
 .content ul {
   line-height: 1.8;
 }
 
-@media screen and (min-width: 1025px) {
+@media screen and (max-width: 1024px) {
   .root {
-    flex-direction: row;
+    flex-direction: column;
   }
 
   .list {
-    flex: 0 0 auto;
-    flex-direction: column;
-    margin: 36px 0;
-    width: auto;
+    flex-direction: row;
+    margin: 0;
+    width: 100%;
   }
 
   .trigger {
-    flex: initial;
-    padding-bottom: 16px;
-    padding-top: 16px;
+    flex: 1;
+    padding-bottom: 13px;
+    padding-top: 13px;
   }
 
   .icon {
-    display: none;
+    display: unset;
   }
 
   .label {
-    display: initial;
+    display: none;
   }
 
   .content {
-    width: 100%;
+    width: auto;
   }
 }