@royaloperahouse/chord 0.5.5 → 0.5.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # CHANGELOG
 
+## [0.5.9]
+- Reduce tablet grid margin from 50px to 32px.
+- Add alternative to aspect-ratio css attribute.
+
+## [0.5.8]
+- PromoWithTitle links style
+
+## [0.5.7]
+- Added Star icon to Iconography
+
+## [0.5.6]
+- Added Favourite and Favourite Full icons to Iconography
+
 ## [0.5.5]
 - Export ImageAspectRatioWrapper component and AspectRatio enum
 

package/dist/chord.cjs.development.js

@@ -469,7 +469,7 @@ var common = {
       gap: '12px'
     },
     tablet: {
-      margin: '50px',
+      margin: '32px',
       outerMargin: '0',
       gap: '20px'
     },
@@ -742,6 +742,36 @@ var EditMyList = (function (_ref) {
   }));
 });
 
+var Favourite = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 4.69994L13.88 8.51994L14.12 8.98994L14.64 9.06994L18.85 9.67994L15.8 12.6799L15.43 13.0499L15.51 13.5599L16.23 17.7599L12.47 15.7599L12 15.5099L11.53 15.7499L7.77 17.7499L8.49 13.5499L8.57 13.0399L8.2 12.6699L5.15 9.66994L9.36 9.05994L9.88 8.97994L10.12 8.50994L12 4.69994ZM12 2.43994L9.22 8.07994L3 8.99994L7.5 13.3899L6.44 19.5799L12 16.6399L17.56 19.5599L16.5 13.3699L21 8.99994L14.78 8.09994L12 2.43994Z",
+    fill: color
+  }));
+});
+
+var FavouriteFull = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9.22 8.07994L12 2.43994L14.78 8.09994L21 8.99994L16.5 13.3699L17.56 19.5599L12 16.6399L6.44 19.5799L7.5 13.3899L3 8.99994L9.22 8.07994Z",
+    fill: color
+  }));
+});
+
 var Filter = (function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -1606,6 +1636,21 @@ var Refresh = (function (_ref) {
   }));
 });
 
+var Star = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 48 46",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M24 0L30.0248 16.7076L47.7764 17.2746L33.7483 28.1674L38.6946 45.2254L24 35.25L9.30537 45.2254L14.2517 28.1674L0.223587 17.2746L17.9752 16.7076L24 0Z",
+    fill: color
+  }));
+});
+
 var AudioDescription = (function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -1905,6 +1950,8 @@ var IconLibrary = {
   Expand: Expand,
   ExternalLink: ExternalLink,
   Facebook: Facebook,
+  Favourite: Favourite,
+  FavouriteFull: FavouriteFull,
   Filter: Filter,
   FindAScreening: FindAScreening,
   Forward10: Forward10,
@@ -1936,6 +1983,7 @@ var IconLibrary = {
   Settings: Settings,
   Shift: Shift,
   Space: Space,
+  Star: Star,
   Subscribe: Subscribe,
   Subtitles: Subtitles,
   Tick: Tick,
@@ -2431,11 +2479,41 @@ var SectionSplitter = function SectionSplitter(_ref) {
   AspectRatio["16:9"] = "16 / 9";
 })(exports.AspectRatio || (exports.AspectRatio = {}));
 
+var AspectRatioLegacy;
+
+(function (AspectRatioLegacy) {
+  AspectRatioLegacy["1 / 1"] = "100";
+  AspectRatioLegacy["3 / 4"] = "133";
+  AspectRatioLegacy["4 / 3"] = "75";
+  AspectRatioLegacy["16 / 9"] = "56.25";
+})(AspectRatioLegacy || (AspectRatioLegacy = {}));
+
+var AspectRatioWidth;
+
+(function (AspectRatioWidth) {
+  AspectRatioWidth["1 / 1"] = "1";
+  AspectRatioWidth["3 / 4"] = "0.75";
+  AspectRatioWidth["4 / 3"] = "1.33";
+  AspectRatioWidth["16 / 9"] = "1.78";
+})(AspectRatioWidth || (AspectRatioWidth = {}));
+
 var _templateObject$d;
-var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: ", ";\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n"])), function (_ref) {
+var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    position: relative;\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
       aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
+}, function (_ref2) {
+  var _ref2$aspectRatio = _ref2.aspectRatio,
+      aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio;
+  return aspectRatio;
+}, function (_ref3) {
+  var _ref3$aspectRatio = _ref3.aspectRatio,
+      aspectRatio = _ref3$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref3$aspectRatio;
+  return AspectRatioLegacy[aspectRatio];
+}, function (_ref4) {
+  var _ref4$aspectRatio = _ref4.aspectRatio,
+      aspectRatio = _ref4$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref4$aspectRatio;
+  return aspectRatio;
 });
 
 var _templateObject$e, _templateObject2$2;
@@ -4125,7 +4203,7 @@ var Carousel = function Carousel(_ref) {
       if (window.matchMedia(devices.mobile).matches) {
         setSlidesOffsetBefore(20); // Mobile margin grid
       } else if (window.matchMedia(devices.tablet).matches) {
-        setSlidesOffsetBefore(50); // Tablet margin grid
+        setSlidesOffsetBefore(32); // Tablet margin grid
       } else {
         setSlidesOffsetBefore(Math.floor(window.innerWidth * 0.1) - 3); // 10% of width
       }
@@ -4206,7 +4284,7 @@ var Carousel = function Carousel(_ref) {
 
 var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$1;
 var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n  user-select: none;\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
-var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  h4 {\n    margin: 0;\n    padding: 0;\n  }\n\n  h5 {\n    display: none;\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 1 / 6;\n      padding-top: 32px;\n      padding-right: 28px;\n\n      h4 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: var(--line-height-altHeader-5);\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n      }\n    }\n  }\n"])), devices.tablet, function (_ref) {
+var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  h4 {\n    margin: 0;\n    padding: 0;\n  }\n\n  h5 {\n    display: none;\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 1 / 6;\n      padding-top: 32px;\n      padding-right: 28px;\n      padding-left: 32px;\n\n      h4 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: var(--line-height-altHeader-5);\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n      }\n    }\n  }\n"])), devices.tablet, function (_ref) {
   var theme = _ref.theme;
   return theme.fonts.mobile.sizes.altHeaders[4];
 }, function (_ref2) {
@@ -4219,7 +4297,7 @@ var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i |
   var theme = _ref4.theme;
   return theme.fonts.mobile.lineHeights.altHeaders[4];
 }, devices.mobile);
-var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 2 / 1 / 2 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 2 / 6;\n      padding: 28px 28px 28px 50px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 3 / 1 / 4 / 15;\n      width: 100%;\n      padding: 0 20px;\n      margin: 24px 0;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 2 / 1 / 2 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 2 / 6;\n      padding: 28px 28px 28px 32px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 3 / 1 / 4 / 15;\n      width: 100%;\n      padding: 0 20px;\n      margin: 24px 0;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n  width: 132px;\n  height: 36px;\n\n  @media ", " {\n    & {\n      margin-bottom: 20px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n"])), devices.mobile);
 var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n  h3 {\n    padding: 0;\n    margin: 0 0 8px 0;\n  }\n\n  h6 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      h3 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n\n      h6 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), devices.tablet, function (_ref5) {
   var theme = _ref5.theme;
@@ -4272,8 +4350,8 @@ var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_t
   return theme.fonts.mobile.lineHeights.body[1];
 }, devices.mobile);
 var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n"])));
-var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  .swiper-slide {\n    width: calc(100% - 50px - var(--rotator-button-width));\n    -webkit-transform: translate3d(0, 0, 0);\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 6 / 3 / 15;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 50px;\n  top: calc(50% - calc(var(--rotator-button-width) / 2));\n  z-index: 2;\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.mobile);
+var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  .swiper-slide {\n    width: calc(100% - 50px - var(--rotator-button-width));\n    -webkit-transform: translate3d(0, 0, 0);\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 6 / 3 / 15;\n\n      .swiper-slide {\n        width: calc(100% - 32px - var(--rotator-button-width));\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 50px;\n  top: calc(50% - calc(var(--rotator-button-width) / 2));\n  z-index: 2;\n\n  @media ", " {\n    & {\n      right: 32px;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.mobile);
 
 var _excluded$8 = ["text"];
@@ -4837,7 +4915,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
 };
 
 var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6;
-var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--base-color-black);\n    filter: opacity(40%);\n    z-index: ", ";\n  }\n\n  @media ", " {\n    & {\n      aspect-ratio: 1 / 1;\n      background-image: url('", "');\n      background-position: center;\n      display: flex;\n      align-items: start;\n    }\n  }\n"])), function (_ref) {
+var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--base-color-black);\n    filter: opacity(40%);\n    z-index: ", ";\n  }\n\n  @media ", " {\n    & {\n      aspect-ratio: 1 / 1;\n      @supports not (aspect-ratio: 1 / 1) {\n        height: 100vw;\n      }\n      background-image: url('", "');\n      background-position: center;\n      display: flex;\n      align-items: start;\n    }\n  }\n"])), function (_ref) {
   var bgUrlDesktop = _ref.bgUrlDesktop;
   return bgUrlDesktop;
 }, zIndexes.content, devices.mobile, function (_ref2) {
@@ -4846,7 +4924,7 @@ var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_temp
   return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
 });
 var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  z-index: ", ";\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content min-content;\n  grid-template-areas:\n    '. . . . . . logo logo logo logo . . . . . .'\n    '. . . text text text text text text text text text text . . .'\n    '. . . button button button button button button button button button button . . .';\n\n  @media ", " {\n    & {\n      height: 100%;\n      grid-template-rows: 1fr max-content 1fr;\n      grid-template-areas:\n        '. . . . logo logo logo logo logo logo . . . .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. . . . . logo logo logo logo . . . . .'\n        '. text text text text text text text text text text text text .'\n        '. . button button button button button button button button button button . .';\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
-var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile);
+var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobileAndTablet);
 var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
 var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(3 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(3 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-5);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
@@ -4972,12 +5050,21 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
 }, devices.mobile);
 var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
 var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref5) {
-  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
-      primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
-      _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref5$tertiaryButtonT === void 0 ? 0 : _ref5$tertiaryButtonT;
+var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors.black;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.colors.darkgrey;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.colors.primary;
+});
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref8) {
+  var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
+      primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
+      _ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
   var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -4985,11 +5072,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
   }
 
   return '';
-}, devices.mobile, devices.tablet, function (_ref6) {
-  var _ref6$primaryButtonTe = _ref6.primaryButtonTextLength,
-      primaryButtonTextLength = _ref6$primaryButtonTe === void 0 ? 0 : _ref6$primaryButtonTe,
-      _ref6$tertiaryButtonT = _ref6.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref6$tertiaryButtonT === void 0 ? 0 : _ref6$tertiaryButtonT;
+}, devices.mobile, devices.tablet, function (_ref9) {
+  var _ref9$primaryButtonTe = _ref9.primaryButtonTextLength,
+      primaryButtonTextLength = _ref9$primaryButtonTe === void 0 ? 0 : _ref9$primaryButtonTe,
+      _ref9$tertiaryButtonT = _ref9.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref9$tertiaryButtonT === void 0 ? 0 : _ref9$tertiaryButtonT;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
 
   if (isLinksLayoutColumnTablet) {
@@ -5114,14 +5201,50 @@ var TextOnly = function TextOnly(_ref) {
 };
 
 var _templateObject$M, _templateObject2$s;
-var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 12px - var(--line-height-body-2));\n  }\n"])), ImageAspectRatioWrapper);
+var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 12px - var(--line-height-body-2));\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), ImageAspectRatioWrapper, function (_ref) {
+  var _ref$aspectRatio = _ref.aspectRatio,
+      aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
+  return aspectRatio;
+}, function (_ref2) {
+  var _ref2$aspectRatio = _ref2.aspectRatio,
+      aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio,
+      height = _ref2.height;
+  return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
+});
 var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 12px;\n  height: var(--line-height-body-2);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-2);\n  font-weight: var(--font-weight-body-2);\n  letter-spacing: var(--letter-spacing-body-2);\n  line-height: var(--line-height-body-2);\n  text-transform: var(--text-transform-body-2);\n  word-break: var(--word-break-body-2);\n  font-style: italic;\n"])));
 
 var ImageWithCaption = function ImageWithCaption(_ref) {
   var caption = _ref.caption,
       children = _ref.children,
       aspectRatio = _ref.aspectRatio;
-  return /*#__PURE__*/React__default.createElement(Wrapper$2, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+  var wrapperRef = React.useRef(null);
+
+  var _useState = React.useState(0),
+      height = _useState[0],
+      setHeight = _useState[1];
+
+  React.useEffect(function () {
+    var setWrapperHeight = function setWrapperHeight() {
+      var _wrapperRef$current;
+
+      return setHeight((wrapperRef == null ? void 0 : (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
+    };
+
+    window.addEventListener('resize', setWrapperHeight);
+
+    if (wrapperRef) {
+      setWrapperHeight();
+    }
+
+    return function () {
+      return window.removeEventListener('resize', setWrapperHeight);
+    };
+  }, [wrapperRef]);
+  return /*#__PURE__*/React__default.createElement(Wrapper$2, {
+    aspectRatio: aspectRatio,
+    ref: wrapperRef,
+    height: height
+  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: aspectRatio
   }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
 };