Make sure that rich-text has spacing and margin. DDFFORM-5

It worked in Storybook, but not in Drupal.
That is because Storybook adds its own wrapper, which made it appear
correct.

src/stories/Library/rich-text/rich-text.scss

@@ -0,0 +1,80 @@
+// This component is used for WYSIWYG content.
+// E.g. we cannot control classes of the underlying elements, so in this case
+// we will target HTML tags instead.
+.rich-text {
+  @include typography($typo__rich-text-body);
+
+  // Setting a max-width to increase readability for sentences.
+  max-width: $layout__max-width--text;
+  margin: auto;
+  padding-left: $layout__page-padding;
+  padding-right: $layout__page-padding;
+
+  a {
+    @extend %text-inline-link;
+  }
+
+  h2 {
+    @include typography($typo__h3);
+  }
+
+  h3 {
+    @include typography($typo__h4);
+  }
+
+  > * {
+    margin-bottom: $s-md;
+  }
+
+  ol > li,
+  ul > li {
+    $_dash-width: 21px;
+    $_dash-width--wide: 33px;
+
+    position: relative;
+    padding-left: $_dash-width + $s-md;
+    padding-bottom: $s-lg;
+
+    &::before {
+      position: absolute;
+      top: 0.8em;
+      left: 0;
+      width: $_dash-width;
+      text-align: center;
+    }
+
+    @include media-query__medium {
+      padding-left: $_dash-width--wide + $s-lg;
+
+      &::before {
+        width: $_dash-width--wide;
+      }
+    }
+  }
+
+  ul > li::before {
+    content: "";
+    height: 1px;
+    background-color: black;
+  }
+
+  ol {
+    counter-reset: list;
+
+    > li::before {
+      @include typography(
+        $typo__h4,
+        (
+          excludes: (
+            line-height,
+          ),
+        )
+      );
+
+      font-weight: normal;
+      line-height: 0;
+      counter-increment: list;
+      content: counter(list) ".";
+    }
+  }
+}

src/styles/scss/tools/variables.layout.scss

@@ -1,3 +1,11 @@
 $layout__max-width: 1024px;
 $layout__max-width--small: 768px;
 $layout__max-width--large: 1440px;
+
+$layout__max-width--text: 780px;
+$layout__max-width--single-media: 896px;
+$layout__max-width--multiple-medias: 1240px;
+
+// Some elements should not go out to the edge of the screen on small screens.
+// This is the padding that is always shown on the left and right.
+$layout__page-padding: $s-xl;