Merged in feature/tier-matching-component (pull request #1175)

SAS Tier matching comparison block (SW-921)

Approved-by: Joakim Jäderberg
Approved-by: Matilda Landström

components/SasTierComparison/sas-tier-comparison.module.css

@@ -0,0 +1,72 @@
+.comparisonSection {
+  width: 100%;
+  gap: var(--Spacing-x4);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+}
+
+.preamble {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.comparisonCard {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x4) var(--Spacing-x3);
+  border-radius: var(--Corner-radius-Large);
+}
+
+.comparisonContainer {
+  display: flex;
+  gap: var(--Spacing-x2);
+}
+
+.comparisonBrand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  width: 100%;
+}
+
+.comparisonIcon {
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: var(--Spacing-x7);
+}
+
+@media screen and (max-width: 767px) {
+  .comparisonIcon {
+    display: none;
+  }
+  .comparisonContainer {
+    flex-direction: column;
+    gap: var(--Spacing-x4);
+  }
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+}
+
+.ctaContainer {
+  border-top: 1px solid var(--Base-Border-Subtle);
+  display: flex;
+  justify-content: center;
+  margin-top: var(--Spacing-x4);
+}
+
+.ctaLink {
+  margin-top: var(--Spacing-x4);
+}