feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -0,0 +1,94 @@
+.intro {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.largeTableContainer {
+  display: none;
+}
+
+.columns {
+  display: none;
+  position: relative;
+  background-color: var(--UI-Opacity-White-100);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.mobileColumns {
+  background-color: var(--UI-Opacity-White-100);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin: 0 calc(var(--Spacing-x2) * -1) calc(var(--Spacing-x9) * -1)
+    calc(var(--Spacing-x2) * -1);
+  padding-bottom: var(--Spacing-x9);
+  position: relative;
+}
+
+.columnHeaderContainer {
+  display: contents;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--Spacing-x2);
+  z-index: 2;
+}
+
+.columnHeader {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+  justify-content: flex-end;
+}
+
+.icon {
+  align-self: center;
+}
+
+.columnHeader:nth-child(1) {
+  padding-right: var(--Spacing-x1);
+}
+
+.columnHeader:nth-child(2) {
+  padding-left: var(--Spacing-x1);
+  border-top-left-radius: var(--Corner-radius-Medium);
+}
+
+.columnHeader:nth-child(2):has(+ .columnHeader) {
+  padding-left: var(--Spacing-x1);
+  padding-right: var(--Spacing-x1);
+}
+
+.columnHeader:nth-child(3) {
+  padding-left: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 950px) {
+  .mobileColumns {
+    display: none;
+  }
+
+  .columnHeaderContainer {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  .columnHeader:nth-child(2) {
+    border-top-right-radius: var(--Corner-radius-Medium);
+  }
+
+  .columns {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .columns {
+    display: none;
+  }
+
+  .intro {
+    margin: auto;
+  }
+
+  .largeTableContainer {
+    display: block;
+    margin: auto;
+  }
+}