@comicrelief/component-library 8.51.5 → 8.51.7

package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md

@@ -39,9 +39,23 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
   external: null
 }));
 
+const cardsFour = [
+  ...cardsWithRenderedBody,
+  {
+    ...cardsWithRenderedBody[0],
+    id: 'example-4th-card',
+    title: 'Fourth card',
+    body: (
+      <Text tag="p">
+        Fourth card (added for layout testing)
+      </Text>
+    )
+  }
+];
+
 const data = {
   ...exampleData,
-  cards: cardsWithRenderedBody,
+  cards: cardsFour,
   layout: "3 columns",
   carouselOfCards: true,
   backgroundColour: "grey_medium",
@@ -56,7 +70,7 @@ const data = {
 
 ### CTAMultiCard: Desktop Grid View (2 columns) with large padding
 
-**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a vertical stack (non-carousel). This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**
+**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a carousel. This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -96,7 +110,7 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
 const dataWithLongText = {
   ...exampleData,
   layout: "2 columns",
-  carouselOfCards: false,
+  carouselOfCards: true,
   backgroundColour: "Transparent",
   cards: cardsWithRenderedBody,
   paddingAbove: '4rem',
@@ -108,7 +122,7 @@ const dataWithLongText = {
 </div>;
 ```
 
-### CTAMultiCard: Wrap behaviour (3 columns, non-carousel)
+### CTAMultiCard: Wrap behaviour (3 columns)
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -133,12 +147,36 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
   external: null
 }));
 
+const cardsFive = [
+  ...cardsWithRenderedBody,
+  {
+    ...cardsWithRenderedBody[0],
+    id: 'wrap-example-3',
+    title: 'Fourth card',
+    body: (
+      <Text tag="p">
+        Short body text (4)
+      </Text>
+    )
+  },
+  {
+    ...cardsWithRenderedBody[1],
+    id: 'wrap-example-4',
+    title: 'Fifth card',
+    body: (
+      <Text tag="p">
+        Short body text (5)
+      </Text>
+    )
+  }
+];
+
 const dataWrapExample = {
   ...exampleData,
   layout: "3 columns",
-  carouselOfCards: false,
+  carouselOfCards: true,
   backgroundColour: "rnd_26_light_pink",
-  cards: cardsWithRenderedBody,
+  cards: cardsFive,
   paddingAbove: '2rem',
   paddingBelow: '2rem'
 };

package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.CardsSection = exports.CardsQueryWrapper = exports.CardsInner = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
-var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
 const CardsQueryWrapper = exports.CardsQueryWrapper = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardsQueryWrapper",
   componentId: "sc-gsdqzv-0"
@@ -36,44 +34,55 @@ const CardsSection = exports.CardsSection = _styledComponents.default.div.withCo
 const CardsInner = exports.CardsInner = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardsInner",
   componentId: "sc-gsdqzv-2"
-})(["width:100%;max-width:1152px;margin:0 auto;", ""], _ref4 => {
+})(["width:100%;max-width:1152px;margin:0 auto;", " ", ""], _ref4 => {
   let {
     isCarousel
   } = _ref4;
-  return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){padding-left:", ";padding-right:", ";}"], _allBreakpoints.breakpointValues.M - 1, (0, _spacing.default)('md'), (0, _spacing.default)('md'));
+  return !isCarousel && (0, _styledComponents.css)(["padding-inline:1rem;@media ", "{padding-inline:2rem;}"], _ref5 => {
+    let {
+      theme
+    } = _ref5;
+    return theme.allBreakpoints('M');
+  });
+}, _ref6 => {
+  let {
+    isCarousel
+  } = _ref6;
+  return isCarousel && (0, _styledComponents.css)(["@media ", "{padding-inline:2rem;}@media (min-width:", "px){padding-inline:0;}"], _ref7 => {
+    let {
+      theme
+    } = _ref7;
+    return theme.allBreakpoints('M');
+  }, _allBreakpoints.breakpointValues.XL);
 });
 const CardsContainer = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardsContainer",
   componentId: "sc-gsdqzv-3"
-})(["display:flex;flex-direction:column;width:100%;gap:1rem;@media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:fit-content;max-width:100%;margin:0 auto;}@media ", "{column-gap:2rem;}", " @media ", "{", "}"], _ref5 => {
+})(["display:flex;flex-direction:column;width:100%;gap:1rem;@media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:100%;max-width:100%;margin:0 auto;}@media ", "{column-gap:2rem;}", " ", ""], _ref8 => {
   let {
     theme
-  } = _ref5;
+  } = _ref8;
   return theme.allBreakpoints('M');
-}, _ref6 => {
+}, _ref9 => {
   let {
     theme
-  } = _ref6;
+  } = _ref9;
   return theme.allBreakpoints('L');
-}, _ref7 => {
+}, _ref10 => {
+  let {
+    columns,
+    useSplideCarousel
+  } = _ref10;
+  return !useSplideCarousel && columns === 2 && (0, _styledComponents.css)(["@media (min-width:", "px){display:grid;grid-template-columns:repeat(2,minmax(443px,560px));justify-content:center;align-items:stretch;column-gap:2rem;row-gap:2rem;width:100%;max-width:100%;margin:0;& > *:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:min(100%,560px);}}"], _allBreakpoints.breakpointValues.L);
+}, _ref11 => {
   let {
     isCarousel
-  } = _ref7;
-  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref8 => {
+  } = _ref11;
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref12 => {
     let {
       useSplideCarousel
-    } = _ref8;
-    return useSplideCarousel ? (0, _styledComponents.css)(["display:block;cursor:grab;width:100%;margin:0;max-width:100%;padding:0.75rem 1rem;gap:0;.splide__list{align-items:stretch;}.splide__slide{display:flex;height:auto;}"]) : (0, _styledComponents.css)(["flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;margin:0;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 1rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
+    } = _ref12;
+    return useSplideCarousel ? (0, _styledComponents.css)(["display:block;cursor:grab;width:100%;margin:0;max-width:100%;padding:0.75rem 1rem;gap:0;.splide,.splide__track{overflow:visible}.splide__list{align-items:stretch;}.splide__slide{display:flex;height:auto;}"]) : (0, _styledComponents.css)(["flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;margin:0;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 1rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
   });
-}, _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.allBreakpoints('XL');
-}, _ref10 => {
-  let {
-    columns
-  } = _ref10;
-  return columns === 3 && (0, _styledComponents.css)(["display:grid;justify-content:center;align-items:stretch;grid-template-columns:repeat(3,minmax(0,363px));width:100%;margin:0 auto;max-width:100%;"]);
 });
 var _default = exports.default = CardsContainer;

package/dist/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -8,16 +8,16 @@ exports[`handles data structure correctly 1`] = `
     className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 ehBqzi"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 bvGqKF"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dneGvf"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 icRtAH"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -95,7 +95,7 @@ exports[`handles data structure correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -141,10 +141,10 @@ exports[`handles data structure correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -222,10 +222,10 @@ exports[`handles data structure correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"
@@ -291,16 +291,16 @@ exports[`renders 2 columns layout correctly 1`] = `
     className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 bvGqKF"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 jZvayd"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 bWeGAp"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -378,7 +378,7 @@ exports[`renders 2 columns layout correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -424,10 +424,10 @@ exports[`renders 2 columns layout correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -505,10 +505,10 @@ exports[`renders 2 columns layout correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"
@@ -574,16 +574,16 @@ exports[`renders carousel mode correctly 1`] = `
     className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 bDNuWh"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 gPXAnw"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -661,7 +661,7 @@ exports[`renders carousel mode correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -707,10 +707,10 @@ exports[`renders carousel mode correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -788,10 +788,10 @@ exports[`renders carousel mode correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"
@@ -857,16 +857,16 @@ exports[`renders correctly with data prop 1`] = `
     className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 bvGqKF"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dneGvf"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -944,7 +944,7 @@ exports[`renders correctly with data prop 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -990,10 +990,10 @@ exports[`renders correctly with data prop 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -1071,10 +1071,10 @@ exports[`renders correctly with data prop 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"

package/dist/components/Molecules/CTA/CTAMultiCard/example_data.json

@@ -5,7 +5,7 @@
   "layout": "3 columns",
   "columnsOnMd": false,
   "paddingOptions": "Both Off",
-  "carouselOfCards": false,
+  "carouselOfCards": true,
   "cards": [
         {
           "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",

package/dist/components/Molecules/CTA/CTASingleCard/CTASingleCard.md

@@ -47,7 +47,7 @@ const exampleCard = {
   external: null
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTASingleCard data={{ card: exampleCard, backgroundColour: 'Transparent', paddingAbove: '1rem', paddingBelow: '2rem' }} />
 </div>;
 ```
@@ -63,7 +63,7 @@ const exampleCard = {
   label: 'Example Label',
   body: (
     <Text tag="p">
-      Single card with background colour set on the full-width section
+      Single card
     </Text>
   ),
   link: "/test",
@@ -76,7 +76,7 @@ const exampleCard = {
   external: null
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTASingleCard data={{ card: exampleCard, backgroundColour: 'grey_medium', paddingAbove: '1rem', paddingBelow: '2rem' }} />
 </div>;
 ```
@@ -95,7 +95,7 @@ const exampleCardWithLongText = {
   body: (
     <>
       <Text tag="p">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        Single card with background colour set on the full-width section
       </Text>
       <Text tag="p">
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

package/dist/components/Molecules/CTA/CTASingleCard/CTASingleCard.style.js

@@ -9,7 +9,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const SingleCardSection = exports.SingleCardSection = _styledComponents.default.div.withConfig({
   displayName: "CTASingleCardstyle__SingleCardSection",
   componentId: "sc-15wjhr6-0"
-})(["padding-top:", ";padding-bottom:", ";width:100%;background:", ";"], _ref => {
+})(["padding-top:", ";padding-bottom:", ";padding-inline:1rem;@media ", "{padding-inline:2rem;}@media ", "{padding-inline:4rem;}width:100%;background:", ";"], _ref => {
   let {
     paddingAbove
   } = _ref;
@@ -20,10 +20,20 @@ const SingleCardSection = exports.SingleCardSection = _styledComponents.default.
   } = _ref2;
   return paddingBelow;
 }, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoints2026('M');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.breakpoints2026('L');
+}, _ref5 => {
   let {
     theme,
     backgroundColor
-  } = _ref3;
+  } = _ref5;
   return theme.color(backgroundColor);
 });
 const SingleCardInner = exports.SingleCardInner = _styledComponents.default.div.withConfig({

package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap

@@ -131,13 +131,13 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 .c3 img {
-  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22,1,0.36,1);
-  -webkit-transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
-  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
 }
 
 .c2 {
-  width: 100%;
+  width: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -191,7 +191,6 @@ exports[`renders correctly with data prop 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-size: 14px;
   color: #969598;
-  margin-bottom: 1rem;
 }
 
 .c12 {
@@ -218,6 +217,7 @@ exports[`renders correctly with data prop 1`] = `
 .c0 {
   padding-top: 1rem;
   padding-bottom: 2rem;
+  padding-inline: 1rem;
   width: 100%;
   background: transparent;
 }
@@ -337,6 +337,9 @@ exports[`renders correctly with data prop 1`] = `
     -webkit-transform-origin: center;
     -ms-transform-origin: center;
     transform-origin: center;
+    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
   }
 
   .c3:hover,
@@ -351,9 +354,9 @@ exports[`renders correctly with data prop 1`] = `
   }
 
   .c3:hover .c4 img {
-    -webkit-transform: scale(1.11);
-    -ms-transform: scale(1.11);
-    transform: scale(1.11);
+    -webkit-transform: scale(1.06);
+    -ms-transform: scale(1.06);
+    transform: scale(1.06);
   }
 
   .c3:hover .c13 {
@@ -411,6 +414,18 @@ exports[`renders correctly with data prop 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c0 {
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    padding-inline: 4rem;
+  }
+}
+
 <div
   className="c0"
 >
@@ -607,13 +622,13 @@ exports[`renders correctly without image 1`] = `
 }
 
 .c3 img {
-  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22,1,0.36,1);
-  -webkit-transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
-  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
 }
 
 .c2 {
-  width: 100%;
+  width: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -667,7 +682,6 @@ exports[`renders correctly without image 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-size: 14px;
   color: #969598;
-  margin-bottom: 1rem;
 }
 
 .c8 {
@@ -694,6 +708,7 @@ exports[`renders correctly without image 1`] = `
 .c0 {
   padding-top: 1rem;
   padding-bottom: 2rem;
+  padding-inline: 1rem;
   width: 100%;
   background: transparent;
 }
@@ -775,6 +790,9 @@ exports[`renders correctly without image 1`] = `
     -webkit-transform-origin: center;
     -ms-transform-origin: center;
     transform-origin: center;
+    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
   }
 
   .c3:hover,
@@ -843,6 +861,18 @@ exports[`renders correctly without image 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c0 {
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    padding-inline: 4rem;
+  }
+}
+
 <div
   className="c0"
 >