feat(SW-2930): Aligned margins and spacing for RTE html with Figma

Approved-by: Christian Andolf

apps/scandic-web/components/JsonToHtml/jsontohtml.module.css

@@ -1,9 +1,52 @@
-.imageContainer {
+.container {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.heading {
+  color: var(--Text-Heading);
+  margin-top: var(--Space-x3);
+}
+
+.h1,
+.h2 {
+  margin-bottom: var(--Space-x2);
+}
+
+.h3,
+.h4,
+.h5,
+.p,
+.blockquote,
+.code,
+.divider,
+.div {
+  margin-bottom: var(--Space-x15);
+}
+
+.imageWithCaption {
+  display: grid;
+  gap: var(--Space-x1);
+  margin: var(--Space-x3) 0;
+
+  .imageWrapper {
+    margin: 0;
+  }
+}
+
+.imageWrapper {
   position: relative;
   width: 100%;
   height: 365px;
   border-radius: var(--Corner-radius-md);
-  margin: var(--Spacing-x1) var(--Spacing-x0);
+  margin: var(--Space-x3) 0;
   overflow: hidden;
 }
 
@@ -14,17 +57,19 @@
 
 .ul,
 .ol {
-  padding: var(--Spacing-x2) var(--Spacing-x0);
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
+  padding: 0;
+  margin-top: var(--Space-x2);
+  margin-bottom: var(--Space-x2);
 }
 
 .ol > li::marker {
-  color: var(--Primary-Light-On-Surface-Accent);
+  color: var(--Icon-Accent);
 }
 
 .li {
-  margin-left: var(--Spacing-x3);
+  margin-left: var(--Space-x3);
 }
 
 .heart > .li::before,
@@ -33,8 +78,8 @@
   position: relative;
   height: 8px;
   top: 3px;
-  margin-right: var(--Spacing-x1);
-  margin-left: calc(var(--Spacing-x3) * -1);
+  margin-right: var(--Space-x1);
+  margin-left: calc(var(--Space-x3) * -1);
 }
 
 .heart > .li,
@@ -50,23 +95,32 @@
   position: relative;
   height: 8px;
   top: 3px;
-  margin-right: var(--Spacing-x1);
-  margin-left: calc(var(--Spacing-x3) * -1);
-}
-
-.container {
-  display: grid;
-  gap: var(--Spacing-x3);
-  max-width: 1197px;
+  margin-right: var(--Space-x1);
+  margin-left: calc(var(--Space-x3) * -1);
 }
 
 .li > p {
   display: inline;
+  margin: 0;
 }
 
 .tableContainer {
   max-width: 100%;
   overflow-x: auto;
+  margin: var(--Space-x3) 0;
+}
+
+.table .p {
+  display: inline;
+  margin: 0;
+}
+
+.theadContent {
+  color: var(--Text-Heading);
+}
+
+.iframe {
+  margin: var(--Space-x3) 0;
 }
 
 @media screen and (min-width: 768px) {