@comicrelief/component-library 7.35.9 → 7.35.10

package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js

@@ -83,7 +83,7 @@ const Including = exports.Including = (0, _styledComponents.default)(_Text.defau
 const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.withConfig({
   displayName: "WYMDCarouselstyle__CarouselWrapper",
   componentId: "sc-115z54p-6"
-})(["height:100%;background-color:", ";max-width:760px;padding:", ";margin:0 auto;border-radius:20px;box-shadow:0px 0px 20px rgba(0,0,0,0.15);.carousel{position:relative;margin:0 auto;padding-top:", ";@media ", "{padding-top:", ";}button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;transition:opacity 0.2s linear;background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&: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));}}.wymd-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.image-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;}@media ", "{padding-bottom:", "px !important;}@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform:scale(0.5);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transition:transform ", "s ease;transform-origin:top;transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-222% - 6px);transform:scale(0.5);width:300%;}}}.all-text-wrapper{transform:translateY(0) scale(1);}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}}}}@media ", "{&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-187% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], _ref9 => {
+})(["height:100%;background-color:", ";max-width:760px;padding:", ";margin:0 auto;border-radius:20px;box-shadow:0px 0px 20px rgba(0,0,0,0.15);.carousel{position:relative;margin:0 auto;padding-top:", ";@media ", "{padding-top:", ";}button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;transition:opacity 0.2s linear;background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&: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));}}.wymd-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.image-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform:scale(0.5);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transition:transform ", "s ease;transform-origin:top;transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-222% - 6px);transform:scale(0.5);width:300%;}}}.all-text-wrapper{transform:translateY(0) scale(1);}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}}}}@media ", "{padding-bottom:", "px !important;&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-187% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], _ref9 => {
   let {
     theme
   } = _ref9;
@@ -103,19 +103,9 @@ const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.
     theme
   } = _ref12;
   return theme.breakpoint('small');
-}, props => props.tabletHeight, _ref13 => {
+}, props => props.tabletHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB, _ref13 => {
   let {
     theme
   } = _ref13;
   return theme.breakpoint('medium');
-}, props => props.tabletHeight, _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.breakpoint('small');
-}, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB, _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.breakpoint('medium');
-});
+}, props => props.desktopHeight);

package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js

@@ -12,5 +12,5 @@ it("renders correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_WYMDCarousel.default, {
     data: carouselItemsComplete
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c3 {\n      color: #E52630;\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c5 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c2 {\n      width: 75%;\n      margin: 0 auto;\n    }\n\n    .c2:first-child {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 16px;\n      line-height: 19.5px;\n    }\n\n    .c4 {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 34px;\n      line-height: 37px;\n    }\n\n    .c6 {\n      margin-bottom: 0;\n      text-align: center;\n      font-size: 12px;\n      line-height: 14.63px;\n    }\n\n    .c0 {\n      height: 100%;\n      background-color: #FFFFFF;\n      max-width: 760px;\n      padding: 2rem;\n      margin: 0 auto;\n      border-radius: 20px;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n    }\n\n    .c0 .carousel {\n      position: relative;\n      margin: 0 auto;\n      padding-top: 2rem;\n    }\n\n    .c0 .carousel button.carousel__back-button,\n    .c0 .carousel button.carousel__next-button {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 33% !important;\n      height: 100%;\n      padding: 0 !important;\n      box-shadow: none;\n      text-indent: -9999px;\n      background-color: transparent;\n      border: none;\n    }\n\n    .c0 .carousel button.carousel__back-button:after,\n    .c0 .carousel button.carousel__next-button:after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 50%;\n      height: 100%;\n      -webkit-transition: opacity 0.2s linear;\n      transition: opacity 0.2s linear;\n      background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel button.carousel__back-button:hover:after,\n    .c0 .carousel button.carousel__next-button:hover:after {\n      opacity: 0.5;\n    }\n\n    .c0 .carousel button.carousel__next-button {\n      left: auto;\n      right: 0;\n    }\n\n    .c0 .carousel button.carousel__next-button:before {\n      -webkit-transform: translate(0,-50%) rotate(-90deg);\n      -ms-transform: translate(0,-50%) rotate(-90deg);\n      transform: translate(0,-50%) rotate(-90deg);\n    }\n\n    .c0 .carousel button.carousel__next-button:after {\n      left: auto;\n      right: 0;\n      background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel .wymd-carousel {\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      transition: -webkit-transform 0.75s;\n      -o-transition: transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: transform 0.75s;\n      transition: transform 0.75s;\n      -webkit-transform: 0.75s;\n      will-change: transform;\n    }\n\n    .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {\n      content: none;\n    }\n\n    .c0 .carousel .wymd-carousel .carousel__slide {\n      padding-bottom: 450px !important;\n    }\n\n    .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {\n      text-align: center;\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: start;\n      -webkit-justify-content: flex-start;\n      -ms-flex-pack: start;\n      justify-content: flex-start;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    @media (min-width:1024px) {\n      .c2:first-child {\n        font-size: 20px;\n        line-height: 24.38px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c4 {\n        font-size: 60px;\n        line-height: 60px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        font-size: 64px;\n        line-height: 68px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 17px;\n        line-height: 19px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel {\n        padding-top: 2rem;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel button.carousel__back-button,\n      .c0 .carousel button.carousel__next-button {\n        width: 33.3% !important;\n      }\n\n      .c0 .carousel button.carousel__back-button:after,\n      .c0 .carousel button.carousel__next-button:after {\n        width: 100%;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 500px !important;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 500px !important;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 475px !important;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n        -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform-origin: top;\n        -ms-transform-origin: top;\n        transform-origin: top;\n        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        transform: translateY(calc(-45px + 5%)) scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-222% - 6px);\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(0) scale(1);\n        -ms-transform: translateY(0) scale(1);\n        transform: translateY(0) scale(1);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        transform: translateY(calc(-45px + 5%)) scale(0.5);\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\n        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-187% - 6px);\n        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\n        width: 250%;\n      }\n    }\n\n    <div\n      className=\"c0 CarouselWrapper\"\n      id=\"7zdR84QkZwrTh9NWx2H926\"\n    >\n      <p\n        className=\"c1 c2\"\n        color=\"inherit\"\n        size=\"s\"\n      >\n        Over the past two years, we\u2019ve supported\n      </p>\n      <h1\n        className=\"c3 c4\"\n        color=\"red\"\n        size=\"s\"\n      >\n        11.7 million people\n      </h1>\n      <p\n        className=\"c5 c6\"\n        color=\"inherit\"\n        size=\"s\"\n      >\n        including...\n      </p>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c3 {\n      color: #E52630;\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c5 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c2 {\n      width: 75%;\n      margin: 0 auto;\n    }\n\n    .c2:first-child {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 16px;\n      line-height: 19.5px;\n    }\n\n    .c4 {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 34px;\n      line-height: 37px;\n    }\n\n    .c6 {\n      margin-bottom: 0;\n      text-align: center;\n      font-size: 12px;\n      line-height: 14.63px;\n    }\n\n    .c0 {\n      height: 100%;\n      background-color: #FFFFFF;\n      max-width: 760px;\n      padding: 2rem;\n      margin: 0 auto;\n      border-radius: 20px;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n    }\n\n    .c0 .carousel {\n      position: relative;\n      margin: 0 auto;\n      padding-top: 2rem;\n    }\n\n    .c0 .carousel button.carousel__back-button,\n    .c0 .carousel button.carousel__next-button {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 33% !important;\n      height: 100%;\n      padding: 0 !important;\n      box-shadow: none;\n      text-indent: -9999px;\n      background-color: transparent;\n      border: none;\n    }\n\n    .c0 .carousel button.carousel__back-button:after,\n    .c0 .carousel button.carousel__next-button:after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 50%;\n      height: 100%;\n      -webkit-transition: opacity 0.2s linear;\n      transition: opacity 0.2s linear;\n      background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel button.carousel__back-button:hover:after,\n    .c0 .carousel button.carousel__next-button:hover:after {\n      opacity: 0.5;\n    }\n\n    .c0 .carousel button.carousel__next-button {\n      left: auto;\n      right: 0;\n    }\n\n    .c0 .carousel button.carousel__next-button:before {\n      -webkit-transform: translate(0,-50%) rotate(-90deg);\n      -ms-transform: translate(0,-50%) rotate(-90deg);\n      transform: translate(0,-50%) rotate(-90deg);\n    }\n\n    .c0 .carousel button.carousel__next-button:after {\n      left: auto;\n      right: 0;\n      background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel .wymd-carousel {\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      transition: -webkit-transform 0.75s;\n      -o-transition: transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: transform 0.75s;\n      transition: transform 0.75s;\n      -webkit-transform: 0.75s;\n      will-change: transform;\n    }\n\n    .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {\n      content: none;\n    }\n\n    .c0 .carousel .wymd-carousel .carousel__slide {\n      padding-bottom: 425px !important;\n    }\n\n    .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {\n      text-align: center;\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: start;\n      -webkit-justify-content: flex-start;\n      -ms-flex-pack: start;\n      justify-content: flex-start;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    @media (min-width:1024px) {\n      .c2:first-child {\n        font-size: 20px;\n        line-height: 24.38px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c4 {\n        font-size: 60px;\n        line-height: 60px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        font-size: 64px;\n        line-height: 68px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 17px;\n        line-height: 19px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel {\n        padding-top: 2rem;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel button.carousel__back-button,\n      .c0 .carousel button.carousel__next-button {\n        width: 33.3% !important;\n      }\n\n      .c0 .carousel button.carousel__back-button:after,\n      .c0 .carousel button.carousel__next-button:after {\n        width: 100%;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 450px !important;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n        -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform-origin: top;\n        -ms-transform-origin: top;\n        transform-origin: top;\n        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        transform: translateY(calc(-45px + 5%)) scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-222% - 6px);\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(0) scale(1);\n        -ms-transform: translateY(0) scale(1);\n        transform: translateY(0) scale(1);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        transform: translateY(calc(-45px + 5%)) scale(0.5);\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 475px !important;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\n        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-187% - 6px);\n        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\n        width: 250%;\n      }\n    }\n\n    <div\n      className=\"c0 CarouselWrapper\"\n      id=\"7zdR84QkZwrTh9NWx2H926\"\n    >\n      <p\n        className=\"c1 c2\"\n        color=\"inherit\"\n        size=\"s\"\n      >\n        Over the past two years, we\u2019ve supported\n      </p>\n      <h1\n        className=\"c3 c4\"\n        color=\"red\"\n        size=\"s\"\n      >\n        11.7 million people\n      </h1>\n      <p\n        className=\"c5 c6\"\n        color=\"inherit\"\n        size=\"s\"\n      >\n        including...\n      </p>\n    </div>\n  ");
 });

package/dist/styleguide/data/data.js

@@ -43,8 +43,8 @@ const testImpactSliderItems = exports.testImpactSliderItems = [{
 const carouselItemsComplete = exports.carouselItemsComplete = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H926',
-  mobileHeight: 450,
-  tabletHeight: 500,
+  mobileHeight: 425,
+  tabletHeight: 450,
   desktopHeight: 475,
   headerCopy: 'Over the past two years, we’ve supported',
   peopleHelpedText: '11.7 million people',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.35.9",
+  "version": "7.35.10",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js

@@ -161,7 +161,6 @@ const CarouselWrapper = styled.div`
         rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
       }
 
-
       &:hover {
         &:after {
           opacity: 0.5;
@@ -207,18 +206,13 @@ const CarouselWrapper = styled.div`
       }
       
       .carousel__slide {
+        // 'Mobile'
         padding-bottom: ${props => props.mobileHeight}px !important;
 
+        // 'Tablet' (and up) tweaks for the 3-visible layout
         @media ${({ theme }) => theme.breakpoint('small')} {
-          padding-bottom: ${props => props.tabletHeight}px !important;
-        }
 
-        @media ${({ theme }) => theme.breakpoint('medium')} {
           padding-bottom: ${props => props.tabletHeight}px !important;
-        }
-
-        @media ${({ theme }) => theme.breakpoint('small')} {
-          padding-bottom: ${props => props.desktopHeight}px !important;
 
           // All slides:
           .carousel__inner-slide {
@@ -258,7 +252,6 @@ const CarouselWrapper = styled.div`
               }
             }
 
-
             // 2nd and 3rd:
             + .carousel__slide--visible {
               .carousel__inner-slide {
@@ -294,9 +287,9 @@ const CarouselWrapper = styled.div`
           }
         }
 
-        // HERE WE GO
-        // START OF DESKTOP
+        // 'Desktop'
         @media ${({ theme }) => theme.breakpoint('medium')} {
+          padding-bottom: ${props => props.desktopHeight}px !important;
 
           // First
           &.carousel__slide--visible {

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

@@ -149,7 +149,7 @@ it("renders correctly", () => {
     }
 
     .c0 .carousel .wymd-carousel .carousel__slide {
-      padding-bottom: 450px !important;
+      padding-bottom: 425px !important;
     }
 
     .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {
@@ -219,19 +219,7 @@ it("renders correctly", () => {
 
     @media (min-width:740px) {
       .c0 .carousel .wymd-carousel .carousel__slide {
-        padding-bottom: 500px !important;
-      }
-    }
-
-    @media (min-width:1024px) {
-      .c0 .carousel .wymd-carousel .carousel__slide {
-        padding-bottom: 500px !important;
-      }
-    }
-
-    @media (min-width:740px) {
-      .c0 .carousel .wymd-carousel .carousel__slide {
-        padding-bottom: 475px !important;
+        padding-bottom: 450px !important;
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {
@@ -316,6 +304,10 @@ it("renders correctly", () => {
     }
 
     @media (min-width:1024px) {
+      .c0 .carousel .wymd-carousel .carousel__slide {
+        padding-bottom: 475px !important;
+      }
+
       .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
         right: calc(-250% - 6px);
         width: 250%;

package/src/styleguide/data/data.js

@@ -52,8 +52,8 @@ const testImpactSliderItems = [
 const carouselItemsComplete = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H926',
-  mobileHeight: 450,
-  tabletHeight: 500,
+  mobileHeight: 425,
+  tabletHeight: 450,
   desktopHeight: 475,
   headerCopy: 'Over the past two years, we’ve supported',
   peopleHelpedText: '11.7 million people',