feat(SW-2285): Added campaign essentials block on campaign page

Approved-by: Christian Andolf
Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/Essentials/essentials.module.css

@@ -0,0 +1,108 @@
+.essentialsSection {
+  display: grid;
+  gap: var(--Space-x5);
+}
+
+.header {
+  display: grid;
+  gap: var(--Space-x2);
+}
+
+.heading {
+  color: var(--Text-Heading);
+}
+
+.list {
+  list-style: none;
+  display: grid;
+  grid-auto-rows: auto;
+  row-gap: var(--Space-x15);
+}
+
+.listItem {
+  position: relative;
+  display: grid;
+  gap: 19px; /* Special from Figma */
+  color: var(--Text-Secondary);
+  justify-items: center;
+  padding: 0 var(--Space-x1);
+
+  &::after {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    content: "";
+    width: 1px;
+    background-color: var(--Border-Default);
+    height: 82px; /* Special from Figma */
+  }
+}
+
+.text {
+  display: grid;
+  gap: var(--Space-x1);
+  justify-items: center;
+}
+
+@media screen and (max-width: 949px) {
+  .list {
+    grid-template-columns: repeat(2, 1fr);
+
+    .listItem:nth-child(2n)::after {
+      display: none;
+    }
+  }
+}
+
+@media screen and (min-width: 950px) and (max-width: 1366px) {
+  .list {
+    grid-template-columns: repeat(4, 1fr);
+
+    &:not(.count3, .count5, .count6) .listItem:nth-child(4n)::after {
+      display: none;
+    }
+
+    &.count3,
+    &.count5,
+    &.count6 {
+      grid-template-columns: repeat(3, 1fr);
+
+      .listItem:nth-child(3n)::after {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .list {
+    grid-template-columns: repeat(4, 1fr);
+
+    &:not(.count3, .count5, .count6) .listItem:nth-child(4n)::after {
+      display: none;
+    }
+
+    &.count3 {
+      grid-template-columns: repeat(3, 1fr);
+
+      .listItem:nth-child(3n)::after {
+        display: none;
+      }
+    }
+    &.count5 {
+      grid-template-columns: repeat(5, 1fr);
+
+      .listItem:nth-child(5n)::after {
+        display: none;
+      }
+    }
+    &.count6 {
+      grid-template-columns: repeat(6, 1fr);
+
+      .listItem:nth-child(6n)::after {
+        display: none;
+      }
+    }
+  }
+}