@comicrelief/component-library 8.77.0 → 8.77.1

package/src/components/Organisms/WYMDCarousel/__snapshots__/WYMDCarousel.test.js.snap

@@ -393,7 +393,7 @@ exports[`renders the customised padding version correctly:
   line-height: inherit;
 }
 
-.c10 {
+.c11 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
   text-transform: uppercase;
@@ -402,16 +402,16 @@ exports[`renders the customised padding version correctly:
   line-height: 2rem;
 }
 
-.c10 {
+.c11 {
   font-family: 'Anton',Impact,sans-serif;
 }
 
-.c10 span {
+.c11 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c8 {
+.c9 {
   width: 45%;
   display: block;
   padding: 9%;
@@ -421,13 +421,13 @@ exports[`renders the customised padding version correctly:
   overflow: visible;
 }
 
-.c8 img {
+.c9 img {
   width: 100%;
   height: auto;
   display: block;
 }
 
-.c8:after {
+.c9:after {
   position: absolute;
   content: '';
   top: 50%;
@@ -437,22 +437,22 @@ exports[`renders the customised padding version correctly:
   border-bottom: 2px dashed #89888b;
 }
 
-.c9 {
+.c10 {
   padding: 1.5rem 0 0.75rem;
 }
 
-.c9 h1 {
+.c10 h1 {
   font-size: 34px;
   line-height: 37px;
 }
 
-.c11 {
+.c12 {
   padding: 0;
   width: 75%;
   margin: 0 auto;
 }
 
-.c11 p {
+.c12 p {
   font-size: 1rem;
   line-height: 1.5rem;
 }
@@ -493,28 +493,37 @@ exports[`renders the customised padding version correctly:
   box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
-.c1 .carousel {
+.c1 .splide {
   position: relative;
   margin: 0 auto;
   padding-top: 2rem;
 }
 
-.c1 .carousel button.carousel__back-button,
-.c1 .carousel button.carousel__next-button {
+.c1 .splide .splide__arrows {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.c1 .splide button.splide__arrow {
   position: absolute;
   left: 0;
   top: 0;
-  width: 33%!important;
+  width: 33.3%;
   height: 100%;
-  padding: 0!important;
+  padding: 0;
   box-shadow: none;
   text-indent: -9999px;
   background-color: transparent;
-  border: none;
+  transform: none;
+  border-radius: 0;
+  opacity: 1;
 }
 
-.c1 .carousel button.carousel__back-button:after,
-.c1 .carousel button.carousel__next-button:after {
+.c1 .splide button.splide__arrow:after {
   content: "";
   position: absolute;
   top: 0;
@@ -525,48 +534,42 @@ exports[`renders the customised padding version correctly:
   background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
 }
 
-.c1 .carousel button.carousel__back-button:hover:after,
-.c1 .carousel button.carousel__next-button:hover:after {
-  opacity: 0.5;
+.c1 .splide button.splide__arrow.splide__arrow--next {
+  left: auto;
+  right: 0;
 }
 
-.c1 .carousel button.carousel__next-button {
+.c1 .splide button.splide__arrow.splide__arrow--next:after {
   left: auto;
   right: 0;
+  background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,1));
 }
 
-.c1 .carousel button.carousel__next-button:before {
-  transform: translate(0,-50%) rotate(-90deg);
+.c1 .splide button.splide__arrow:hover:after {
+  opacity: 0.5;
 }
 
-.c1 .carousel button.carousel__next-button:after {
-  left: auto;
-  right: 0;
-  background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
+.c1 .splide button.splide__arrow svg {
+  display: none;
 }
 
-.c1 .carousel .wymd-carousel {
-  transition: -webkit-transform 0.75s;
-  -o-transition: transform 0.75s;
-  transition: transform 0.75s;
-  -webkit-transform: 0.75s;
-  will-change: transform;
+.c1 .splide button.carousel__next-button {
+  left: auto;
+  right: 0;
 }
 
-.c1 .carousel .wymd-carousel .last-slide .image-wrapper:after {
-  content: none;
+.c1 .splide button.carousel__next-button:after {
+  left: auto;
+  right: 0;
+  background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
 }
 
-.c1 .carousel .wymd-carousel .carousel__slide {
-  padding-bottom: 425px!important;
+.c1 .splide.wymd-carousel .splide__slide {
+  height: 425px;
 }
 
-.c1 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {
-  text-align: center;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: column;
+.c1 .splide.wymd-carousel .splide__slide.last-slide .c8:after {
+  content: none;
 }
 
 .c0 {
@@ -617,33 +620,33 @@ exports[`renders the customised padding version correctly:
 }
 
 @media (min-width: 740px) {
-  .c10 {
+  .c11 {
     font-size: 2.5rem;
     line-height: 2.5rem;
   }
 }
 
 @media (min-width: 1024px) {
-  .c10 {
+  .c11 {
     font-size: 3rem;
     line-height: 3rem;
   }
 }
 
 @media (min-width: 1024px) {
-  .c8 {
+  .c9 {
     width: 50%;
     padding: 9%;
   }
 
-  .c8:after {
+  .c9:after {
     width: 100%;
     right: calc(-100% - 8px);
   }
 }
 
 @media (min-width: 740px) {
-  .c9 h1 {
+  .c10 h1 {
     font-size: 40px;
     line-height: 40px;
   }
@@ -678,99 +681,26 @@ exports[`renders the customised padding version correctly:
 }
 
 @media (min-width: 1024px) {
-  .c1 .carousel {
+  .c1 .splide {
     padding-top: 2rem;
   }
 }
 
 @media (min-width: 740px) {
-  .c1 .carousel button.carousel__back-button,
-  .c1 .carousel button.carousel__next-button {
-    width: 33.3%!important;
-  }
-
-  .c1 .carousel button.carousel__back-button:after,
-  .c1 .carousel button.carousel__next-button:after {
+  .c1 .splide button.splide__arrow:after {
     width: 100%;
   }
 }
 
 @media (min-width: 740px) {
-  .c1 .carousel .wymd-carousel .carousel__slide {
-    padding-bottom: 450px!important;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide >div:first-child {
-    transition: transform 0.75s ease;
-    transform: scale(0.5);
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide >div:first-child:after {
-    transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
-    right: calc(-300% - 6px);
-    transform: scale(1);
-    width: 300%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {
-    transition: transform 0.75s ease;
-    transform-origin: top;
-    transform: translateY(calc(-45px + 5%)) scale(0.5);
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide >div:first-child:after {
-    right: calc(-300% - 6px);
-    transform: scale(1);
-    width: 300%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible .carousel__inner-slide >div:first-child {
-    transform: scale(1);
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible .carousel__inner-slide >div:first-child:after {
-    right: calc(-222% - 6px);
-    transform: scale(0.5);
-    width: 300%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible .all-text-wrapper {
-    transform: translateY(0) scale(1);
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible +.carousel__slide--visible >div>div:first-child {
-    transform: scale(0.5);
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible +.carousel__slide--visible >div>div:first-child:after {
-    right: calc(-300% - 6px);
-    transform: scale(1);
-    width: 300%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible +.carousel__slide--visible .all-text-wrapper {
-    transform: translateY(calc(-45px + 5%)) scale(0.5);
+  .c1 .splide.wymd-carousel .splide__slide {
+    height: 450px;
   }
 }
 
 @media (min-width: 1024px) {
-  .c1 .carousel .wymd-carousel .carousel__slide {
-    padding-bottom: 475px!important;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide >div:first-child:after {
-    right: calc(-250% - 6px);
-    width: 250%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible .carousel__inner-slide >div:first-child:after {
-    right: calc(-187% - 6px);
-    width: 250%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible +.carousel__slide--visible .carousel__inner-slide >div:first-child:after {
-    right: calc(-250% - 6px);
-    width: 250%;
+  .c1 .splide.wymd-carousel .splide__slide {
+    height: 475px;
   }
 }
 
@@ -797,545 +727,376 @@ exports[`renders the customised padding version correctly:
       including...
     </p>
     <div
-      className="carousel"
+      className="splide wymd-carousel"
     >
       <div
-        aria-label="slider"
-        aria-live="polite"
-        className="horizontalSlider___281Ls carousel__slider carousel__slider--horizontal"
-        onKeyDown={[Function]}
-        role="listbox"
-        style={{}}
+        className="splide__track"
       >
-        <div
-          className="carousel__slider-tray-wrapper carousel__slider-tray-wrap--horizontal"
-          style={{}}
+        <ul
+          className="splide__list"
         >
-          <div
-            className="sliderTray___-vHFQ wymd-carousel carousel__slider-tray carousel__slider-tray--horizontal"
-            onClickCapture={[Function]}
-            onMouseDown={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            style={
-              {
-                "flexDirection": "row",
-                "transform": "translateX(0%) translateX(0px)",
-                "width": "366.6666666666667%",
-              }
-            }
+          <li
+            className="splide__slide"
+            data-index={0}
+            index={0}
           >
             <div
-              aria-label="slide"
-              aria-selected={true}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--visible"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
+              className=""
             >
               <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
-              />
-            </div>
-            <div
-              aria-label="slide"
-              aria-selected={true}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--visible"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
-            >
+                className="c8 c9 image-wrapper"
+              >
+                <img
+                  alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
+                  src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
+                />
+              </div>
               <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
+                className=""
               >
                 <div
-                  className="c8 image-wrapper"
+                  className="c10"
                 >
-                  <img
-                    alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
-                    src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
-                  />
+                  <h1
+                    className="c11"
+                  >
+                    1,000
+                  </h1>
                 </div>
                 <div
-                  className="all-text-wrapper"
+                  className="c12"
                 >
-                  <div
-                    className="c9"
-                  >
-                    <h1
-                      className="c10"
-                    >
-                      1,000
-                    </h1>
-                  </div>
-                  <div
-                    className="c11"
+                  <p
+                    className="c6"
                   >
-                    <p
-                      className="c6"
-                    >
-                      children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
-                    </p>
-                  </div>
+                    children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
+                  </p>
                 </div>
               </div>
             </div>
+          </li>
+          <li
+            className="splide__slide"
+            data-index={1}
+            index={1}
+          >
             <div
-              aria-label="slide"
-              aria-selected={true}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--visible"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
+              className=""
             >
               <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
+                className="c8 c9 image-wrapper"
+              >
+                <img
+                  alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
+                  src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
+                />
+              </div>
+              <div
+                className=""
               >
                 <div
-                  className="c8 image-wrapper"
+                  className="c10"
                 >
-                  <img
-                    alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
-                    src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
-                  />
+                  <h1
+                    className="c11"
+                  >
+                    750,000
+                  </h1>
                 </div>
                 <div
-                  className="all-text-wrapper"
+                  className="c12"
                 >
-                  <div
-                    className="c9"
+                  <p
+                    className="c6"
                   >
-                    <h1
-                      className="c10"
-                    >
-                      750,000
-                    </h1>
-                  </div>
-                  <div
-                    className="c11"
-                  >
-                    <p
-                      className="c6"
-                    >
-                      children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
-                    </p>
-                  </div>
+                    children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
+                  </p>
                 </div>
               </div>
             </div>
+          </li>
+          <li
+            className="splide__slide"
+            data-index={2}
+            index={2}
+          >
             <div
-              aria-label="slide"
-              aria-selected={false}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--hidden"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
+              className=""
             >
               <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
+                className="c8 c9 image-wrapper"
+              >
+                <img
+                  alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
+                  src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
+                />
+              </div>
+              <div
+                className=""
               >
                 <div
-                  className="c8 image-wrapper"
+                  className="c10"
                 >
-                  <img
-                    alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
-                    src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
-                  />
+                  <h1
+                    className="c11"
+                  >
+                    3,000
+                  </h1>
                 </div>
                 <div
-                  className="all-text-wrapper"
+                  className="c12"
                 >
-                  <div
-                    className="c9"
-                  >
-                    <h1
-                      className="c10"
-                    >
-                      3,000
-                    </h1>
-                  </div>
-                  <div
-                    className="c11"
+                  <p
+                    className="c6"
                   >
-                    <p
-                      className="c6"
-                    >
-                      children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
-                    </p>
-                  </div>
+                    children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
+                  </p>
                 </div>
               </div>
             </div>
+          </li>
+          <li
+            className="splide__slide"
+            data-index={3}
+            index={3}
+          >
             <div
-              aria-label="slide"
-              aria-selected={false}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--hidden"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
+              className=""
             >
               <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
+                className="c8 c9 image-wrapper"
+              >
+                <img
+                  alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
+                  src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
+                />
+              </div>
+              <div
+                className=""
               >
                 <div
-                  className="c8 image-wrapper"
+                  className="c10"
                 >
-                  <img
-                    alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
-                    src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
-                  />
+                  <h1
+                    className="c11"
+                  >
+                    4,000
+                  </h1>
                 </div>
                 <div
-                  className="all-text-wrapper"
+                  className="c12"
                 >
-                  <div
-                    className="c9"
-                  >
-                    <h1
-                      className="c10"
-                    >
-                      4,000
-                    </h1>
-                  </div>
-                  <div
-                    className="c11"
+                  <p
+                    className="c6"
                   >
-                    <p
-                      className="c6"
-                    >
-                      children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
-                    </p>
-                  </div>
+                    children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
+                  </p>
                 </div>
               </div>
             </div>
+          </li>
+          <li
+            className="splide__slide"
+            data-index={4}
+            index={4}
+          >
             <div
-              aria-label="slide"
-              aria-selected={false}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--hidden"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
+              className=""
             >
               <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
+                className="c8 c9 image-wrapper"
+              >
+                <img
+                  alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
+                  src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
+                />
+              </div>
+              <div
+                className=""
               >
                 <div
-                  className="c8 image-wrapper"
+                  className="c10"
                 >
-                  <img
-                    alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
-                    src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
-                  />
+                  <h1
+                    className="c11"
+                  >
+                    5,000
+                  </h1>
                 </div>
                 <div
-                  className="all-text-wrapper"
+                  className="c12"
                 >
-                  <div
-                    className="c9"
+                  <p
+                    className="c6"
                   >
-                    <h1
-                      className="c10"
-                    >
-                      5,000
-                    </h1>
-                  </div>
-                  <div
-                    className="c11"
-                  >
-                    <p
-                      className="c6"
-                    >
-                      children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
-                    </p>
-                  </div>
+                    children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
+                  </p>
                 </div>
               </div>
             </div>
+          </li>
+          <li
+            className="splide__slide"
+            data-index={5}
+            index={5}
+          >
             <div
-              aria-label="slide"
-              aria-selected={false}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--hidden"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
+              className=""
             >
               <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
+                className="c8 c9 image-wrapper"
+              >
+                <img
+                  alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
+                  src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
+                />
+              </div>
+              <div
+                className=""
               >
                 <div
-                  className="c8 image-wrapper"
+                  className="c10"
                 >
-                  <img
-                    alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
-                    src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
-                  />
+                  <h1
+                    className="c11"
+                  >
+                    6,000
+                  </h1>
                 </div>
                 <div
-                  className="all-text-wrapper"
+                  className="c12"
                 >
-                  <div
-                    className="c9"
-                  >
-                    <h1
-                      className="c10"
-                    >
-                      6,000
-                    </h1>
-                  </div>
-                  <div
-                    className="c11"
+                  <p
+                    className="c6"
                   >
-                    <p
-                      className="c6"
-                    >
-                      children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
-                    </p>
-                  </div>
+                    children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
+                  </p>
                 </div>
               </div>
             </div>
+          </li>
+          <li
+            className="splide__slide"
+            data-index={6}
+            index={6}
+          >
             <div
-              aria-label="slide"
-              aria-selected={false}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--hidden"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
+              className=""
             >
               <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
+                className="c8 c9 image-wrapper"
+              >
+                <img
+                  alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
+                  src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
+                />
+              </div>
+              <div
+                className=""
               >
                 <div
-                  className="c8 image-wrapper"
+                  className="c10"
                 >
-                  <img
-                    alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
-                    src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
-                  />
+                  <h1
+                    className="c11"
+                  >
+                    7,000
+                  </h1>
                 </div>
                 <div
-                  className="all-text-wrapper"
+                  className="c12"
                 >
-                  <div
-                    className="c9"
-                  >
-                    <h1
-                      className="c10"
-                    >
-                      7,000
-                    </h1>
-                  </div>
-                  <div
-                    className="c11"
+                  <p
+                    className="c6"
                   >
-                    <p
-                      className="c6"
-                    >
-                      children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
-                    </p>
-                  </div>
+                    children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
+                  </p>
                 </div>
               </div>
             </div>
+          </li>
+          <li
+            className="splide__slide"
+            data-index={7}
+            index={7}
+          >
             <div
-              aria-label="slide"
-              aria-selected={false}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--hidden"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
+              className=""
             >
               <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
+                className="c8 c9 image-wrapper"
+              >
+                <img
+                  alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
+                  src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
+                />
+              </div>
+              <div
+                className=""
               >
                 <div
-                  className="c8 image-wrapper"
+                  className="c10"
                 >
-                  <img
-                    alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
-                    src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
-                  />
+                  <h1
+                    className="c11"
+                  >
+                    8,000
+                  </h1>
                 </div>
                 <div
-                  className="all-text-wrapper"
+                  className="c12"
                 >
-                  <div
-                    className="c9"
+                  <p
+                    className="c6"
                   >
-                    <h1
-                      className="c10"
-                    >
-                      8,000
-                    </h1>
-                  </div>
-                  <div
-                    className="c11"
-                  >
-                    <p
-                      className="c6"
-                    >
-                      children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
-                    </p>
-                  </div>
+                    children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
+                  </p>
                 </div>
               </div>
             </div>
+          </li>
+          <li
+            className="splide__slide last-slide"
+            data-index={8}
+            index={8}
+          >
             <div
-              aria-label="slide"
-              aria-selected={false}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--hidden last-slide"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
+              className=""
             >
               <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
+                className="c8 c9 image-wrapper"
+              >
+                <img
+                  alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
+                  src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
+                />
+              </div>
+              <div
+                className=""
               >
                 <div
-                  className="c8 image-wrapper"
+                  className="c10"
                 >
-                  <img
-                    alt="children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education."
-                    src="//images.ctfassets.net/zsfivwzfgl3t/6ZsS5CpukQwXRcMSUlbOM1/be31c7ff09891d14232e7c3dbe9fa8a2/028-love_1.png"
-                  />
+                  <h1
+                    className="c11"
+                  >
+                    9,000
+                  </h1>
                 </div>
                 <div
-                  className="all-text-wrapper"
+                  className="c12"
                 >
-                  <div
-                    className="c9"
-                  >
-                    <h1
-                      className="c10"
-                    >
-                      9,000
-                    </h1>
-                  </div>
-                  <div
-                    className="c11"
+                  <p
+                    className="c6"
                   >
-                    <p
-                      className="c6"
-                    >
-                      children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
-                    </p>
-                  </div>
+                    children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
+                  </p>
                 </div>
               </div>
             </div>
-            <div
-              aria-label="slide"
-              aria-selected={false}
-              className="slide___3-Nqo slideHorizontal___1NzNV carousel__slide carousel__slide--hidden"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              role="option"
-              style={
-                {
-                  "paddingBottom": "36.36363636363637%",
-                  "width": "9.090909090909092%",
-                }
-              }
-            >
-              <div
-                className="slideInner___2mfX9 carousel__inner-slide"
-                style={{}}
-              />
-            </div>
-          </div>
-        </div>
+          </li>
+        </ul>
       </div>
-      <button
-        aria-label="previous"
-        className="buttonBack___1mlaL carousel__back-button"
-        disabled={false}
-        onClick={[Function]}
-        type="button"
-      >
-        Back
-      </button>
-      <button
-        aria-label="next"
-        className="buttonNext___2mOCa carousel__next-button"
-        disabled={false}
-        onClick={[Function]}
-        type="button"
-      >
-        Next
-      </button>
     </div>
   </div>
 </div>
@@ -1770,28 +1531,37 @@ exports[`renders the default padding version correctly:
   box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
-.c1 .carousel {
+.c1 .splide {
   position: relative;
   margin: 0 auto;
   padding-top: 2rem;
 }
 
-.c1 .carousel button.carousel__back-button,
-.c1 .carousel button.carousel__next-button {
+.c1 .splide .splide__arrows {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.c1 .splide button.splide__arrow {
   position: absolute;
   left: 0;
   top: 0;
-  width: 33%!important;
+  width: 33.3%;
   height: 100%;
-  padding: 0!important;
+  padding: 0;
   box-shadow: none;
   text-indent: -9999px;
   background-color: transparent;
-  border: none;
+  transform: none;
+  border-radius: 0;
+  opacity: 1;
 }
 
-.c1 .carousel button.carousel__back-button:after,
-.c1 .carousel button.carousel__next-button:after {
+.c1 .splide button.splide__arrow:after {
   content: "";
   position: absolute;
   top: 0;
@@ -1802,48 +1572,38 @@ exports[`renders the default padding version correctly:
   background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
 }
 
-.c1 .carousel button.carousel__back-button:hover:after,
-.c1 .carousel button.carousel__next-button:hover:after {
-  opacity: 0.5;
-}
-
-.c1 .carousel button.carousel__next-button {
+.c1 .splide button.splide__arrow.splide__arrow--next {
   left: auto;
   right: 0;
 }
 
-.c1 .carousel button.carousel__next-button:before {
-  transform: translate(0,-50%) rotate(-90deg);
-}
-
-.c1 .carousel button.carousel__next-button:after {
+.c1 .splide button.splide__arrow.splide__arrow--next:after {
   left: auto;
   right: 0;
-  background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
+  background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,1));
 }
 
-.c1 .carousel .wymd-carousel {
-  transition: -webkit-transform 0.75s;
-  -o-transition: transform 0.75s;
-  transition: transform 0.75s;
-  -webkit-transform: 0.75s;
-  will-change: transform;
+.c1 .splide button.splide__arrow:hover:after {
+  opacity: 0.5;
 }
 
-.c1 .carousel .wymd-carousel .last-slide .image-wrapper:after {
-  content: none;
+.c1 .splide button.splide__arrow svg {
+  display: none;
 }
 
-.c1 .carousel .wymd-carousel .carousel__slide {
-  padding-bottom: 425px!important;
+.c1 .splide button.carousel__next-button {
+  left: auto;
+  right: 0;
 }
 
-.c1 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {
-  text-align: center;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: column;
+.c1 .splide button.carousel__next-button:after {
+  left: auto;
+  right: 0;
+  background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
+}
+
+.c1 .splide.wymd-carousel .splide__slide {
+  height: 425px;
 }
 
 .c0 {
@@ -1922,99 +1682,26 @@ exports[`renders the default padding version correctly:
 }
 
 @media (min-width: 1024px) {
-  .c1 .carousel {
+  .c1 .splide {
     padding-top: 2rem;
   }
 }
 
 @media (min-width: 740px) {
-  .c1 .carousel button.carousel__back-button,
-  .c1 .carousel button.carousel__next-button {
-    width: 33.3%!important;
-  }
-
-  .c1 .carousel button.carousel__back-button:after,
-  .c1 .carousel button.carousel__next-button:after {
+  .c1 .splide button.splide__arrow:after {
     width: 100%;
   }
 }
 
 @media (min-width: 740px) {
-  .c1 .carousel .wymd-carousel .carousel__slide {
-    padding-bottom: 450px!important;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide >div:first-child {
-    transition: transform 0.75s ease;
-    transform: scale(0.5);
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide >div:first-child:after {
-    transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
-    right: calc(-300% - 6px);
-    transform: scale(1);
-    width: 300%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {
-    transition: transform 0.75s ease;
-    transform-origin: top;
-    transform: translateY(calc(-45px + 5%)) scale(0.5);
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide >div:first-child:after {
-    right: calc(-300% - 6px);
-    transform: scale(1);
-    width: 300%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible .carousel__inner-slide >div:first-child {
-    transform: scale(1);
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible .carousel__inner-slide >div:first-child:after {
-    right: calc(-222% - 6px);
-    transform: scale(0.5);
-    width: 300%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible .all-text-wrapper {
-    transform: translateY(0) scale(1);
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible +.carousel__slide--visible >div>div:first-child {
-    transform: scale(0.5);
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible +.carousel__slide--visible >div>div:first-child:after {
-    right: calc(-300% - 6px);
-    transform: scale(1);
-    width: 300%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible +.carousel__slide--visible .all-text-wrapper {
-    transform: translateY(calc(-45px + 5%)) scale(0.5);
+  .c1 .splide.wymd-carousel .splide__slide {
+    height: 450px;
   }
 }
 
 @media (min-width: 1024px) {
-  .c1 .carousel .wymd-carousel .carousel__slide {
-    padding-bottom: 475px!important;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide >div:first-child:after {
-    right: calc(-250% - 6px);
-    width: 250%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible .carousel__inner-slide >div:first-child:after {
-    right: calc(-187% - 6px);
-    width: 250%;
-  }
-
-  .c1 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible +.carousel__slide--visible +.carousel__slide--visible .carousel__inner-slide >div:first-child:after {
-    right: calc(-250% - 6px);
-    width: 250%;
+  .c1 .splide.wymd-carousel .splide__slide {
+    height: 475px;
   }
 }