npm - @comicrelief/component-library - Versions diffs - 8.51.5 → 8.51.6 - Mend

@comicrelief/component-library 8.51.5 → 8.51.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

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

@@ -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,65 @@ 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;}"], _ref7 => {
+    let {
+      theme
+    } = _ref7;
+    return theme.allBreakpoints('L');
+  });
 });
 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;}", " ", " @media ", "{", "}"], _ref8 => {
   let {
     theme
-  } = _ref5;
+  } = _ref8;
   return theme.allBreakpoints('M');
-}, _ref6 => {
+}, _ref9 => {
   let {
     theme
-  } = _ref6;
+  } = _ref9;
   return theme.allBreakpoints('L');
-}, _ref7 => {
+}, _ref10 => {
+  let {
+    isCarousel,
+    columns
+  } = _ref10;
+  return !isCarousel && 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;
+    } = _ref12;
     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;}"]);
   });
-}, _ref9 => {
+}, _ref13 => {
   let {
     theme
-  } = _ref9;
+  } = _ref13;
   return theme.allBreakpoints('XL');
-}, _ref10 => {
+}, _ref14 => {
   let {
     columns
-  } = _ref10;
+  } = _ref14;
   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 CHANGED Viewed

@@ -8,13 +8,13 @@ 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 cVaqKX"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -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 zWgWI"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -141,7 +141,7 @@ exports[`handles data structure correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -222,7 +222,7 @@ exports[`handles data structure correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -291,13 +291,13 @@ 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 jdzsUU"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 jZvayd"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 kZJZoQ"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -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 ipBvGj"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -424,7 +424,7 @@ exports[`renders 2 columns layout correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -505,7 +505,7 @@ exports[`renders 2 columns layout correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -574,13 +574,13 @@ 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 fEcgRr"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 gPXAnw"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dhfXac"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -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 kgXkPu"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -707,7 +707,7 @@ exports[`renders carousel mode correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -788,7 +788,7 @@ exports[`renders carousel mode correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -857,13 +857,13 @@ 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 jdzsUU"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dneGvf"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 cVaqKX"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -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 zWgWI"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -990,7 +990,7 @@ exports[`renders correctly with data prop 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -1071,7 +1071,7 @@ exports[`renders correctly with data prop 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -137,7 +137,7 @@ exports[`renders correctly with data prop 1`] = `
 }
 .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;
 }
@@ -411,6 +411,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"
 >
@@ -613,7 +625,7 @@ exports[`renders correctly without image 1`] = `
 }
 .c2 {
-  width: 100%;
+  width: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -667,7 +679,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 +705,7 @@ exports[`renders correctly without image 1`] = `
 .c0 {
   padding-top: 1rem;
   padding-bottom: 2rem;
+  padding-inline: 1rem;
   width: 100%;
   background: transparent;
 }
@@ -843,6 +855,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"
 >

package/dist/components/Molecules/CTA/shared/CTACard.style.js CHANGED Viewed

@@ -130,7 +130,7 @@ const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
 const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConfig({
   displayName: "CTACardstyle__CardWrapper",
   componentId: "sc-si8xx1-5"
-})(["width:100%;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " ", " ", ""], _ref20 => {
+})(["width:auto;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " ", " ", ""], _ref20 => {
   let {
     isFullWidth
   } = _ref20;
@@ -171,11 +171,11 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
   let {
     isFullWidth
   } = _ref27;
-  return !isFullWidth && (0, _styledComponents.css)(["@media (min-width:", "px) and (max-width:", "px){", " align-self:stretch;}@media ", "{flex-basis:unset;width:", ";align-self:stretch;}"], _allBreakpoints.breakpointValues.L, _allBreakpoints.breakpointValues.XL - 1, _ref28 => {
+  return !isFullWidth && (0, _styledComponents.css)(["@media (min-width:", "px) and (max-width:", "px){", " align-self:stretch;}@media ", "{", "}"], _allBreakpoints.breakpointValues.L, _allBreakpoints.breakpointValues.XL - 1, _ref28 => {
     let {
       columns
     } = _ref28;
-    return columns === 3 ? (0, _styledComponents.css)(["flex-basis:calc(33.333% - 1rem);min-width:286px;max-width:363px;"]) : (0, _styledComponents.css)(["flex-basis:calc(50% - 1rem);min-width:443px;max-width:560px;"]);
+    return columns === 3 ? (0, _styledComponents.css)(["flex:0 1 auto;width:clamp(286px,calc((100% - 4rem) / 3),363px);"]) : (0, _styledComponents.css)(["flex:0 1 auto;width:100%;"]);
   }, _ref29 => {
     let {
       theme
@@ -185,7 +185,7 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
     let {
       columns
     } = _ref30;
-    return columns === 3 ? '363px' : '560px';
+    return columns === 3 && (0, _styledComponents.css)(["width:100%;max-width:363px;"]);
   });
 });
 const CopyAndLinkSection = exports.CopyAndLinkSection = _styledComponents.default.div.withConfig({
@@ -224,7 +224,7 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
 const CardLabel = exports.CardLabel = _styledComponents.default.div.withConfig({
   displayName: "CTACardstyle__CardLabel",
   componentId: "sc-si8xx1-8"
-})(["font-family:", ";font-size:14px;color:", ";margin-bottom:1rem;"], _ref36 => {
+})(["font-family:", ";font-size:14px;color:", ";"], _ref36 => {
   let {
     theme
   } = _ref36;

package/package.json CHANGED Viewed

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

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
 import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
-import spacing from '../../../../theme/shared/spacing';
 export const CardsQueryWrapper = styled.div`
   /* Container for “single card per row” sizing.
@@ -24,11 +23,16 @@ export const CardsInner = styled.div`
   max-width: 1152px;
   margin: 0 auto;
-  /* Provide mobile gutters for non-carousel stack mode. */
   ${({ isCarousel }) => !isCarousel && css`
-    @media (max-width: ${breakpointValues.M - 1}px) {
-      padding-left: ${spacing('md')};
-      padding-right: ${spacing('md')};
+    padding-inline: 1rem;
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      padding-inline: 2rem;
+    }
+  `}
+  ${({ isCarousel }) => isCarousel && css`
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
+      padding-inline: 2rem;
     }
   `}
 `;
@@ -45,7 +49,7 @@ const CardsContainer = styled.div`
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
-    width: fit-content;
+    width: 100%;
     max-width: 100%;
     margin: 0 auto;
   }
@@ -54,6 +58,28 @@ const CardsContainer = styled.div`
     column-gap: 2rem;
   }
+  /* Ensure 2-column layout behaves itself at L+ */
+  ${({ isCarousel, columns }) => !isCarousel && columns === 2 && css`
+    @media (min-width: ${breakpointValues.L}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;
+      /* if there's an odd "orphan" card on the last row, center it. */
+      & > *:last-child:nth-child(odd) {
+        grid-column: 1 / -1;
+        justify-self: center;
+        width: min(100%, 560px);
+      }
+    }
+  `}
   // Carousel mode - horizontal scroll container (M and below)
   ${({ isCarousel }) => isCarousel && css`
     @media (max-width: ${breakpointValues.L - 1}px) {

package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap CHANGED Viewed

@@ -8,13 +8,13 @@ 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 cVaqKX"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -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 zWgWI"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -141,7 +141,7 @@ exports[`handles data structure correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -222,7 +222,7 @@ exports[`handles data structure correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -291,13 +291,13 @@ 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 jdzsUU"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 jZvayd"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 kZJZoQ"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -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 ipBvGj"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -424,7 +424,7 @@ exports[`renders 2 columns layout correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -505,7 +505,7 @@ exports[`renders 2 columns layout correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -574,13 +574,13 @@ 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 fEcgRr"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 gPXAnw"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dhfXac"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -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 kgXkPu"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -707,7 +707,7 @@ exports[`renders carousel mode correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -788,7 +788,7 @@ exports[`renders carousel mode correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -857,13 +857,13 @@ 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 jdzsUU"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dneGvf"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 cVaqKX"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -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 zWgWI"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -990,7 +990,7 @@ exports[`renders correctly with data prop 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
@@ -1071,7 +1071,7 @@ exports[`renders correctly with data prop 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
         >
           <a
             className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"

package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.md CHANGED Viewed

@@ -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/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.style.js CHANGED Viewed

@@ -3,6 +3,13 @@ import styled from 'styled-components';
 export const SingleCardSection = styled.div`
   padding-top: ${({ paddingAbove }) => paddingAbove};
   padding-bottom: ${({ paddingBelow }) => paddingBelow};
+  padding-inline: 1rem;
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    padding-inline: 2rem;
+  }
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    padding-inline: 4rem;
+  }
   width: 100%;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
 `;

package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap CHANGED Viewed

@@ -137,7 +137,7 @@ exports[`renders correctly with data prop 1`] = `
 }
 .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;
 }
@@ -411,6 +411,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"
 >
@@ -613,7 +625,7 @@ exports[`renders correctly without image 1`] = `
 }
 .c2 {
-  width: 100%;
+  width: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -667,7 +679,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 +705,7 @@ exports[`renders correctly without image 1`] = `
 .c0 {
   padding-top: 1rem;
   padding-bottom: 2rem;
+  padding-inline: 1rem;
   width: 100%;
   background: transparent;
 }
@@ -843,6 +855,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"
 >

package/src/components/Molecules/CTA/shared/CTACard.style.js CHANGED Viewed

@@ -155,7 +155,7 @@ const CardLink = styled.a`
 `;
 const CardWrapper = styled.div`
-  width: 100%;
+  width: auto;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -233,30 +233,31 @@ const CardWrapper = styled.div`
         `)}
   `}
-  // L breakpoint: min/max rules vary by layout
   ${({ isFullWidth }) => !isFullWidth && css`
     @media (min-width: ${breakpointValues.L}px) and (max-width: ${breakpointValues.XL - 1}px) {
       ${({ columns }) => (
     columns === 3
       ? css`
-              flex-basis: calc(33.333% - 1rem);
-              min-width: 286px;
-              max-width: 363px;
+              flex: 0 1 auto;
+              width: clamp(286px, calc((100% - 4rem) / 3), 363px);
             `
       : css`
-              flex-basis: calc(50% - 1rem);
-              min-width: 443px;
-              max-width: 560px;
+              flex: 0 1 auto;
+              /*
+               * In 2-col mode at L+, the parent container uses CSS grid to enforce 2-up.
+               * See the multi card style file.
+               */
+              width: 100%;
             `
   )}
       align-self: stretch;
     }
-    // XL breakpoint and above: fixed widths vary by layout
     @media ${({ theme }) => theme.allBreakpoints('XL')} {
-      flex-basis: unset;
-      width: ${({ columns }) => (columns === 3 ? '363px' : '560px')};
-      align-self: stretch;
+      ${({ columns }) => columns === 3 && css`
+        width: 100%;
+        max-width: 363px;
+      `}
     }
   `}
 `;
@@ -303,7 +304,6 @@ const CardLabel = styled.div`
   font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
   font-size: 14px;
   color: ${({ theme }) => theme.color('grey_3')};
-  margin-bottom: 1rem;
 `;
 const CTA = styled.div`