refactor: organize css

2024-05-28 12:36:13 +02:00
parent f68b184d93
commit 1aa3b39c17
11 changed files with 243 additions and 262 deletions
@@ -0,0 +1,49 @@
+.benefitCardWrapper {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column: 1/3;
+  padding: var(--Spacing-x2);
+  padding-top: 0;
+}
+
+.firstColumn {
+  background-color: var(--Main-Brand-PalePeach);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 50%;
+  z-index: 1;
+}
+
+.secondColumn {
+  background-color: var(--Base-Background-Normal);
+  position: absolute;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin-bottom: calc(var(--Spacing-x2) * -1);
+  left: 50%;
+  right: 0;
+  z-index: 1;
+  border-top-left-radius: var(--Corner-radius-Medium);
+}
+
+@media screen and (min-width: 950px) {
+  .benefitCardWrapper {
+    grid-column: 1/4;
+  }
+
+  .firstColumn {
+    width: calc((100%) / 3);
+    right: calc(100% / 3 * 2);
+    margin-left: 0;
+  }
+
+  .secondColumn {
+    width: calc(100% / 3);
+    left: calc(100% / 3);
+    right: calc(100% / 3);
+  }
+}