Merge pull request #1282 from UN-OCHA/berliner/HPC-10009

HPC-10009: Add support for 4-col interactive content
UN-OCHA · Jan 8, 2025 · b8f7c08 · b8f7c08
2 parents 1c3f449 + 6bf0bce
commit b8f7c08
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/...tom/common_design_subtheme/components/gho-interactive-content/gho-interactive-content.css b/...tom/common_design_subtheme/components/gho-interactive-content/gho-interactive-content.css
@@ -161,3 +161,39 @@
     flex-basis: calc(50% - 1rem);
   }
 }
+
+/**
+ * Support for 4-col interactive content.
+ */
+ .layout--fourcol--interactive-content {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.layout--fourcol--interactive-content > .layout__region {
+  flex: 0 1 100%;
+}
+
+@media screen and (min-width: 768) {
+  .layout--fourcol--interactive-content {
+    gap: 1rem;
+  }
+
+  .layout--fourcol--interactive-content.layout--fourcol--interactive-content--25-25-25-25
+    > .layout__region {
+    flex: 0 1 50%;
+    flex-basis: calc(50% - 1rem);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .layout--fourcol--interactive-content {
+    gap: 1rem;
+  }
+
+  .layout--fourcol--interactive-content.layout--fourcol--interactive-content--25-25-25-25
+    > .layout__region {
+    flex: 0 1 25%;
+    flex-basis: calc(25% - 1rem);
+  }
+}