Adjust number of columns for Split Mode (#2208)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

1 files changed, 26 insertions, 12 deletions

diff --git a/src/styles/services.scss b/src/styles/services.scss
index dd053e93d..cedfcbdd1 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -18,21 +18,35 @@
   }
 }
 
-.mode__split .services {
-  display: flex;
-  overflow: visible;
-
-  .services__webview {
-    position: relative;
-    flex: 1 0 50%;
+.mode__split {
+  .services {
+    display: flex;
+    overflow: visible;
 
-    @media (min-width: 1280px) {
-      flex-basis: 33.33%;
+    .services__webview {
+      position: relative;
+      flex: 1 0 33.33%;
     }
+  }
 
-    @media (min-width: 2048px) {
-      flex-basis: 25%;
-    }
+  &[data-columns="1"] .services .services__webview {
+    flex-basis: 100%;
+  }
+
+  &[data-columns="2"] .services .services__webview {
+    flex-basis: 50%;
+  }
+
+  &[data-columns="3"] .services .services__webview {
+    flex-basis: 33.33%;
+  }
+
+  &[data-columns="4"] .services .services__webview {
+    flex-basis: 25%;
+  }
+
+  &[data-columns="5"] .services .services__webview {
+    flex-basis: 20%;
   }
 }