fix: port CRcom styles over

Author: AndyEPhipps

src/components/Organisms/RichtextCarousel/RichtextCarousel.style.js

@@ -53,7 +53,17 @@ const CarouselWrapper = styled.div`
   margin: 0 auto;
 
   border-radius: 20px;
- ${defaultBoxShadow()}
+  ${defaultBoxShadow()}
+
+  > div:first-child {
+    * {
+      margin-top: 0;
+    }
+
+    h1, h2, h3 {
+      margin-bottom: 1.5rem;
+    }
+  }
 
   .carousel {
     position: relative;
@@ -236,6 +246,13 @@ const CarouselWrapper = styled.div`
           align-items: center;
           justify-content: flex-start;
           flex-direction: column;
+
+          .slide-copy-wrapper {
+            font-size: 0.9rem;
+            * {
+                font-size: inherit;
+            }
+          }
         }
       }
     }

src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js

@@ -28,6 +28,16 @@ it('renders default padding version correctly', () => {
       box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
     }
 
+    .c1 > div:first-child * {
+      margin-top: 0;
+    }
+
+    .c1 > div:first-child h1,
+    .c1 > div:first-child h2,
+    .c1 > div:first-child h3 {
+      margin-bottom: 1.5rem;
+    }
+
     .c1 .carousel {
       position: relative;
       margin: 0 auto;
@@ -122,6 +132,14 @@ it('renders default padding version correctly', () => {
       flex-direction: column;
     }
 
+    .c1 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide .slide-copy-wrapper {
+      font-size: 0.9rem;
+    }
+
+    .c1 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide .slide-copy-wrapper * {
+      font-size: inherit;
+    }
+
     .c0 {
       background-color: #F4F3F5;
       padding: 2rem 0 2rem;
@@ -285,6 +303,16 @@ it('renders custom padding + background colour version correctly', () => {
       box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
     }
 
+    .c1 > div:first-child * {
+      margin-top: 0;
+    }
+
+    .c1 > div:first-child h1,
+    .c1 > div:first-child h2,
+    .c1 > div:first-child h3 {
+      margin-bottom: 1.5rem;
+    }
+
     .c1 .carousel {
       position: relative;
       margin: 0 auto;
@@ -379,6 +407,14 @@ it('renders custom padding + background colour version correctly', () => {
       flex-direction: column;
     }
 
+    .c1 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide .slide-copy-wrapper {
+      font-size: 0.9rem;
+    }
+
+    .c1 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide .slide-copy-wrapper * {
+      font-size: inherit;
+    }
+
     .c0 {
       background-color: #86E4E9;
       padding: 4rem 0 4rem;