@royaloperahouse/harmonic 0.1.10-a → 0.2.0

package/dist/harmonic.cjs.development.js

@@ -364,7 +364,19 @@ function _taggedTemplateLiteralLoose(e, t) {
   return t || (t = e.slice(0)), e.raw = t, e;
 }
 
-var _excluded = ["children", "size", "color", "className"];
+// Utility function for creating className strings
+var createClassNames = function createClassNames(baseClass, options) {
+  var size = options.size,
+    _options$color = options.color,
+    color = _options$color === void 0 ? 'primary' : _options$color,
+    serif = options.serif,
+    em = options.em,
+    className = options.className;
+  return [baseClass, size, "color-" + color, serif ? 'serif' : '', em ? 'em' : '', className || ''].filter(Boolean).join(' ');
+};
+
+var _excluded = ["children", "size", "color", "className"],
+  _excluded2 = ["children", "size", "color", "className"];
 /* ~~~ Headers - size and hierarchy set separately ~~~ */
 var HarmonicHeader = function HarmonicHeader(_ref2) {
   var children = _ref2.children,
@@ -375,20 +387,50 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
     serif = _ref2.serif,
     Tag = _ref2.hierarchy,
     className = _ref2.className;
+  var classNames = createClassNames('header', {
+    size: size,
+    color: color,
+    serif: serif,
+    em: em,
+    className: className
+  });
   return /*#__PURE__*/React__default.createElement(Tag, {
-    className: "header " + size + " color-" + color + " " + (serif ? "serif" : '') + " " + (em ? "em" : '') + " " + className
+    className: classNames
+  }, children);
+};
+/* ~~~ Subtitle - (use case) ~~~ */
+var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
+  var children = _ref3.children,
+    size = _ref3.size,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? 'primary' : _ref3$color,
+    className = _ref3.className;
+  var classNames = createClassNames('subtitle', {
+    size: size,
+    color: color,
+    className: className
+  });
+  return /*#__PURE__*/React__default.createElement("p", {
+    className: classNames
   }, children);
 };
 /* ~~~ Body Copy Text - (use case) ~~~ */
 var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
   var children = _ref4.children,
-    size = _ref4.size,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 'medium' : _ref4$size,
     _ref4$color = _ref4.color,
     color = _ref4$color === void 0 ? 'primary' : _ref4$color,
-    className = _ref4.className;
-  return /*#__PURE__*/React__default.createElement("p", {
-    className: "bodycopy " + size + " color-" + color + " " + className
-  }, children);
+    className = _ref4.className,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+  var classNames = createClassNames('bodycopy', {
+    size: size,
+    color: color,
+    className: className
+  });
+  return /*#__PURE__*/React__default.createElement("p", Object.assign({
+    className: classNames
+  }, props), children);
 };
 /* ~~~ Overline - (use case) ~~~ */
 var HarmonicOverline = function HarmonicOverline(_ref5) {
@@ -397,9 +439,14 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
     _ref5$color = _ref5.color,
     color = _ref5$color === void 0 ? 'primary' : _ref5$color,
     className = _ref5.className,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
+  var classNames = createClassNames('overline', {
+    size: size,
+    color: color,
+    className: className
+  });
   return /*#__PURE__*/React__default.createElement("p", Object.assign({
-    className: "overline " + size + " color-" + color + " " + className
+    className: classNames
   }, props), children);
 };
 
@@ -687,11 +734,11 @@ var devices = {
 };
 
 var _templateObject$1, _templateObject2;
-var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", "\n    var(--button-padding-x);\n  height: var(--button-height);\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: var(--button-color);\n  line-height: var(--button-line-height);\n  width: fit-content;\n  border-style: solid;\n  border-width: 1px;\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n\n  @media ", " {\n    & {\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
+var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", "\n    var(--button-padding-x);\n  height: var(--button-height);\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  line-height: var(--button-line-height);\n  width: fit-content;\n  border-style: solid;\n  border-width: 1px;\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n\n  @media ", " {\n    & {\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
 }, devices.mobile);
-var ButtonIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n  display: inline-block;\n\n  span {\n    svg > path {\n      fill: var(--button-color);\n    }\n  }\n"])));
+var ButtonIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n  display: inline-block;\n"])));
 
 var _templateObject$2;
 var Directions = {
@@ -2635,9 +2682,31 @@ var getBackgroundColor = function getBackgroundColor(_ref2) {
   }
   return COLORS.background;
 };
+var getHoveredColor = function getHoveredColor(_ref3) {
+  var disabled = _ref3.disabled,
+    hoveredColor = _ref3.hoveredColor;
+  if (disabled) {
+    return COLORS.darkGrey;
+  }
+  if (hoveredColor) {
+    return "var(--color-" + hoveredColor + ")";
+  }
+  return COLORS.hover;
+};
+var getPressedColor = function getPressedColor(_ref4) {
+  var disabled = _ref4.disabled,
+    pressedColor = _ref4.pressedColor;
+  if (disabled) {
+    return COLORS.darkGrey;
+  }
+  if (pressedColor) {
+    return "var(--color-" + pressedColor + ")";
+  }
+  return COLORS.pressed;
+};
 
 var _templateObject$3, _templateObject2$1;
-var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  pointer-events: ", ";\n\n  :hover:not(:active) {\n    background-color: ", ";\n    border-color: ", ";\n\n    && svg path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    background-color: ", ";\n    border-color: ", ";\n\n    && svg path {\n      fill: ", ";\n    }\n  }\n\n  && span svg * {\n    fill: ", ";\n  }\n"])), getTextColor, getBackgroundColor, getBackgroundColor, getPointerEvents, COLORS.hover, COLORS.hover, COLORS.hover, COLORS.pressed, COLORS.pressed, COLORS.pressed, getTextColor);
+var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  pointer-events: ", ";\n\n  path {\n    fill: ", ";\n  }\n\n  :hover:not(:active) {\n    background-color: ", ";\n    border-color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    background-color: ", ";\n    border-color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n"])), getTextColor, getBackgroundColor, getBackgroundColor, getPointerEvents, getTextColor, getHoveredColor, getHoveredColor, getTextColor, getPressedColor, getPressedColor, getTextColor);
 var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 var _excluded$3 = ["children", "disabled", "className"];
@@ -2690,13 +2759,9 @@ var getTextColor$1 = function getTextColor(_ref) {
   }
   return COLORS$1["default"];
 };
-var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? COLORS$1.disabled : COLORS$1.transparent;
-};
-var getBorderColor = function getBorderColor(_ref3) {
-  var disabled = _ref3.disabled,
-    borderColor = _ref3.borderColor;
+var getBorderColor = function getBorderColor(_ref2) {
+  var disabled = _ref2.disabled,
+    borderColor = _ref2.borderColor;
   if (disabled) {
     return COLORS$1.disabled;
   }
@@ -2705,9 +2770,34 @@ var getBorderColor = function getBorderColor(_ref3) {
   }
   return COLORS$1.border;
 };
+var getHoveredColor$1 = function getHoveredColor(_ref3) {
+  var disabled = _ref3.disabled,
+    hoveredColor = _ref3.hoveredColor;
+  if (disabled) {
+    return COLORS$1.disabled;
+  }
+  if (hoveredColor) {
+    return "var(--color-" + hoveredColor + ")";
+  }
+  return COLORS$1.hover;
+};
+var getPressedColor$1 = function getPressedColor(_ref4) {
+  var disabled = _ref4.disabled,
+    pressedColor = _ref4.pressedColor;
+  if (disabled) {
+    return COLORS$1.disabled;
+  }
+  if (pressedColor) {
+    return "var(--color-" + pressedColor + ")";
+  }
+  return COLORS$1.pressed;
+};
 
 var _templateObject$4, _templateObject2$2;
-var SecondaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  pointer-events: ", ";\n\n  :hover:not(:active) {\n    color: ", ";\n    border-color: ", ";\n\n    && svg * {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    color: ", ";\n    border-color: ", ";\n\n    && svg * {\n      fill: ", ";\n    }\n  }\n\n  && span svg * {\n    fill: ", ";\n  }\n"])), getTextColor$1, getBackgroundColor$1, getBorderColor, getPointerEvents, COLORS$1.hover, COLORS$1.hover, COLORS$1.hover, COLORS$1.pressed, COLORS$1.pressed, COLORS$1.pressed, getTextColor$1);
+var SecondaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  ", "\n  border-color: ", ";\n  pointer-events: ", ";\n\n  path {\n    fill: ", ";\n  }\n\n  :hover:not(:active) {\n    color: ", ";\n    border-color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    color: ", ";\n    border-color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n"])), getTextColor$1, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled && COLORS$1.disabled;
+}, getBorderColor, getPointerEvents, getTextColor$1, getHoveredColor$1, getHoveredColor$1, getHoveredColor$1, getPressedColor$1, getPressedColor$1, getPressedColor$1);
 var AriaDescription$1 = /*#__PURE__*/styled__default.span(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 var _excluded$4 = ["children", "disabled", "className"];
@@ -2746,7 +2836,7 @@ var COLORS$2 = {
   hover: 'var(--button-tertiary-hover-color)',
   pressed: 'var(--button-tertiary-pressed-color)'
 };
-var getButtonColor = function getButtonColor(_ref) {
+var getTextColor$2 = function getTextColor(_ref) {
   var disabled = _ref.disabled,
     textColor = _ref.textColor;
   if (disabled) {
@@ -2759,7 +2849,7 @@ var getButtonColor = function getButtonColor(_ref) {
 };
 
 var _templateObject$5, _templateObject2$3;
-var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  height: var(--button-height);\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: ", ";\n  width: fit-content;\n  background: none;\n  border-style: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n  pointer-events: ", ";\n\n  :hover:not(:active) {\n    color: ", ";\n\n    && svg path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    color: ", ";\n\n    && svg path {\n      fill: ", ";\n    }\n  }\n\n  && span svg * {\n    fill: ", ";\n  }\n"])), getButtonColor, getPointerEvents, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed, getButtonColor);
+var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  height: var(--button-height);\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: ", ";\n  width: fit-content;\n  background: none;\n  border-style: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n  pointer-events: ", ";\n\n  path {\n    fill: ", ";\n  }\n\n  :hover:not(:active) {\n    color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n"])), getTextColor$2, getPointerEvents, getTextColor$2, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed);
 var TertiaryIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  min-width: 20px;\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
 
 var _excluded$5 = ["children", "className"];
@@ -2966,6 +3056,8 @@ var GridItem = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateO
   AspectRatio["4:3"] = "4 / 3";
   AspectRatio["8:3"] = "8 / 3";
   AspectRatio["16:9"] = "16 / 9";
+  AspectRatio["90:17"] = "90 / 17";
+  AspectRatio["75:32"] = "75 / 32";
 })(exports.AspectRatio || (exports.AspectRatio = {}));
 var AspectRatioLegacy;
 (function (AspectRatioLegacy) {
@@ -2974,6 +3066,8 @@ var AspectRatioLegacy;
   AspectRatioLegacy["4 / 3"] = "75";
   AspectRatioLegacy["8 / 3"] = "37.5";
   AspectRatioLegacy["16 / 9"] = "56.25";
+  AspectRatioLegacy["90 / 17"] = "18.88";
+  AspectRatioLegacy["75 / 32"] = "15";
 })(AspectRatioLegacy || (AspectRatioLegacy = {}));
 var AspectRatioWidth;
 (function (AspectRatioWidth) {
@@ -2982,6 +3076,8 @@ var AspectRatioWidth;
   AspectRatioWidth["4 / 3"] = "1.33";
   AspectRatioWidth["8 / 3"] = "2.67";
   AspectRatioWidth["16 / 9"] = "1.78";
+  AspectRatioWidth["90 / 17"] = "5.29";
+  AspectRatioWidth["75 / 32"] = "2.34";
 })(AspectRatioWidth || (AspectRatioWidth = {}));
 
 var _templateObject$a;
@@ -3022,36 +3118,39 @@ var ImageAspectRatioWrapper = function ImageAspectRatioWrapper(_ref) {
 };
 
 var _templateObject$b, _templateObject2$6, _templateObject3$2, _templateObject4$1, _templateObject5;
-var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: ", ";\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])), function (_ref) {
+var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: ", ";\n  box-shadow: ", ";\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])), function (_ref) {
   var height = _ref.height;
   return height ? height + "px" : '6px';
+}, function (_ref2) {
+  var shadow = _ref2.shadow;
+  return shadow ? '0px 1px 4px 0px rgba(0, 0, 0, 0.15)' : 'none';
 });
-var ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  flex: ", ";\n  padding-left: ", ";\n\n  @media ", " {\n    padding-left: ", ";\n  }\n"])), function (_ref2) {
-  var color = _ref2.color;
-  return color ? "var(--base-color-" + color + ")" : 'var(--base-color-progress)';
-}, function (_ref3) {
-  var progress = _ref3.progress;
-  return progress;
+var ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  flex: ", ";\n  z-index: ", ";\n  padding-left: ", ";\n\n  @media ", " {\n    padding-left: ", ";\n  }\n"])), function (_ref3) {
+  var color = _ref3.color;
+  return color ? "var(--color-base-" + color + ")" : 'var(--color-base-white)';
 }, function (_ref4) {
-  var isProgressWithSteps = _ref4.isProgressWithSteps;
-  return isProgressWithSteps ? '34px' : '0';
-}, devices.mobile, function (_ref5) {
+  var progress = _ref4.progress;
+  return progress;
+}, zIndexes.contentOverlay, function (_ref5) {
   var isProgressWithSteps = _ref5.isProgressWithSteps;
+  return isProgressWithSteps ? '34px' : '0';
+}, devices.mobile, function (_ref6) {
+  var isProgressWithSteps = _ref6.isProgressWithSteps;
   return isProgressWithSteps ? '24px' : '0';
 });
-var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  opacity: 0.5;\n  flex: ", ";\n"])), function (_ref6) {
-  var color = _ref6.color;
-  return color ? "var(--base-color-" + color + ")" : 'var(--base-color-light-grey)';
-}, function (_ref7) {
-  var progress = _ref7.progress;
+var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  flex: ", ";\n  z-index: ", ";\n"])), function (_ref7) {
+  var color = _ref7.color;
+  return color ? "var(--color-base-" + color + ")" : 'var(--color-base-mid-grey)';
+}, function (_ref8) {
+  var progress = _ref8.progress;
   return progress;
-});
+}, zIndexes.contentOverlay);
 var StepsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 10px;\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n\n  @media ", " {\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  }\n"])), devices.mobile);
-var StepWrapper = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  color: ", ";\n"])), function (_ref8) {
-  var isVisible = _ref8.isVisible;
+var StepWrapper = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  color: ", ";\n"])), function (_ref9) {
+  var isVisible = _ref9.isVisible;
   return isVisible ? "visible" : 'hidden';
-}, function (_ref9) {
-  var isActive = _ref9.isActive;
+}, function (_ref10) {
+  var isActive = _ref10.isActive;
   return isActive ? "var(--base-color-black)" : 'var(--base-color-mid-grey)';
 });
 
@@ -3061,6 +3160,8 @@ var Progress = function Progress(_ref) {
     progress = _ref$progress === void 0 ? 0 : _ref$progress,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 6 : _ref$height,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? true : _ref$shadow,
     elapsedLineColor = _ref.elapsedLineColor,
     pendingLineColor = _ref.pendingLineColor,
     steps = _ref.steps;
@@ -3087,6 +3188,7 @@ var Progress = function Progress(_ref) {
   var progressValue = getProgressValue();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressView, {
     height: height,
+    shadow: shadow,
     "data-testid": "progress-container"
   }, /*#__PURE__*/React__default.createElement(ElapsedProgressView, {
     color: elapsedLineColor,
@@ -3420,7 +3522,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
     onKeyDown: onPrevKeyDownHandler,
     tabIndex: 0,
     "data-testid": "iconprev",
-    className: "carousel-icon-wrapper-left"
+    className: "carousel-icon-wrapper-left",
+    "aria-label": "Previous slide",
+    role: "button"
   }, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     "data-testid": "iconprevnoavailable"
   }, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
@@ -3428,7 +3532,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
     onKeyDown: onNextKeyDownHandler,
     tabIndex: 0,
     "data-testid": "iconnext",
-    className: "carousel-icon-wrapper-right"
+    className: "carousel-icon-wrapper-right",
+    "aria-label": "Next slide",
+    role: "button"
   }, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     "data-testid": "iconnextnoavailable"
   }, renderNextIcon())));
@@ -4193,7 +4299,7 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
 };
 
 var _templateObject$p, _templateObject2$h;
-var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--font-family-sans);\n  font-size: 19px;\n  font-weight: 500;\n  line-height: 17px;\n  letter-spacing: 0.4px;\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  @media ", " {\n    font-size: 17px;\n  }\n"])), function (_ref) {
+var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--font-family-sans);\n  font-size: 19px;\n  font-weight: 500;\n  line-height: 17px;\n  letter-spacing: 0.4px;\n  color: var(--color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  @media ", " {\n    font-size: 17px;\n  }\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
 }, function (_ref2) {
@@ -4202,23 +4308,23 @@ var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_temp
 }, devices.mobile);
 var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
 
-var _excluded$b = ["children", "iconName", "iconDirection", "color"];
+var _excluded$b = ["children", "iconName", "iconDirection", "textColor"];
 var TextLink = function TextLink(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
-    color = _ref.color,
+    textColor = _ref.textColor,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
-    color: color,
+    color: textColor,
     iconName: iconName
   }, rest), truncatedString, iconName ? (/*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
     "data-testid": "text-link-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: iconName,
     direction: iconDirection,
-    color: color
+    color: textColor
   }))) : null);
 };
 
@@ -4463,18 +4569,21 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
 var Tickbox2 = /*#__PURE__*/React.forwardRef(Tickbox2Component);
 
 var _templateObject$s, _templateObject2$k, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
-var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-", ");\n"])), function (_ref) {
+var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-", ");\n\n  .color-primary {\n    color: var(--color-base-", ");\n  }\n"])), function (_ref) {
   var color = _ref.color;
   return color;
-});
-var Line = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: var(--base-color-", ");\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 20px;\n  }\n"])), function (_ref2) {
+}, function (_ref2) {
   var color = _ref2.color;
   return color;
+});
+var Line = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: var(--base-color-", ");\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 20px;\n  }\n"])), function (_ref3) {
+  var color = _ref3.color;
+  return color;
 }, devices.mobileAndTablet);
 var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 16px;\n\n  @media ", " {\n    margin-bottom: 8px;\n  }\n"])), devices.mobileAndTablet);
-var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-header-4);\n  font-family: var(--font-family-header);\n  font-feature-settings: var(--font-feature-settings-header);\n  font-weight: var(--font-weight-header-4);\n  letter-spacing: var(--letter-spacing-header-4);\n  line-height: var(--line-height-header-4);\n  text-transform: var(--text-transform-header);\n  display: flex;\n\n  @media ", " {\n    font-size: var(--font-size-header-5);\n  }\n"])), devices.tablet);
-var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  margin-top: 4px;\n"])));
-var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 20px;\n\n  @media ", " {\n    margin: 0 12px;\n  }\n\n  @media ", " {\n    margin: 0 12px;\n  }\n"])), devices.tablet, devices.mobile);
+var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 4px;\n"])));
+var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 20px;\n\n  @media ", " {\n    margin: 0 12px;\n  }\n"])), devices.mobileAndTablet);
 var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
@@ -4507,9 +4616,17 @@ var Timer = function Timer(_ref) {
     }
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
       className: "harmonic-timer-value"
-    }, value), /*#__PURE__*/React__default.createElement(TimerLabel, {
+    }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+      hierarchy: "h3",
+      size: "medium"
+    }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
       className: "harmonic-timer-label"
-    }, label)), separator && /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"));
+    }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+      size: "large"
+    }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+      hierarchy: "h3",
+      size: "medium"
+    }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
   };
   React__default.useEffect(function () {
     if (isEndDateReached) return undefined;
@@ -4549,8 +4666,8 @@ var Timer = function Timer(_ref) {
     color: color
   }, title && (/*#__PURE__*/React__default.createElement(TitleWrapper, {
     className: "harmonic-timer-title-wrapper"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 5
+  }, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
+    size: "large"
   }, title))), /*#__PURE__*/React__default.createElement(ValuesWrapper, {
     className: "harmonic-timer-values-wrapper"
   }, renderTimerValue(days, 'Days'), renderTimerValue(hours, 'Hrs'), renderTimerValue(minutes, 'Mins'), renderTimerValue(seconds, 'Secs', false)), bottomLine && /*#__PURE__*/React__default.createElement(Line, {
@@ -4566,11 +4683,11 @@ var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$t || (_t
 var TypeTags = function TypeTags(_ref) {
   var list = _ref.list;
   return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
-    return /*#__PURE__*/React__default.createElement(Overline, {
-      level: 1,
-      tag: "li",
+    return /*#__PURE__*/React__default.createElement("li", {
       key: t
-    }, t);
+    }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+      size: "large"
+    }, t));
   }));
 };
 
@@ -4980,8 +5097,82 @@ var _templateObject$w, _templateObject2$n;
 var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n"])));
 var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-media-icon-height);\n  width: var(--footer-media-icon-width);\n\n  &:focus {\n    outline: 2px solid var(--color-base-white);\n  }\n"])));
 
+// WARNING: Do not use this on server side rendering, it may throw an error.
+var isIOS = function isIOS() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof navigator === undefined) return false;
+    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
+    // iPad on iOS 13 detection
+    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
+  } catch (e) {
+    console.warn('Error checking if device is iOS.', e);
+    return false;
+  }
+};
+// React hook version of isIOS (for server side rendering)
+var useIOS = function useIOS() {
+  var _useState = React.useState(false),
+    IOS = _useState[0],
+    setIOS = _useState[1];
+  React.useEffect(function () {
+    if (typeof navigator === undefined) return;
+    setIOS(isIOS());
+  }, []);
+  return IOS;
+};
+// Checks device size based on window width
+var isMobile = function isMobile() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof window === undefined) return false;
+    return window.innerWidth < breakpoints.sm;
+  } catch (e) {
+    console.warn('Error checking if device is mobile.', e);
+    return false;
+  }
+};
+// React hook version of isMobile (for server side rendering)
+var useMobile = function useMobile() {
+  var _useState2 = React.useState(false),
+    mobile = _useState2[0],
+    setMobile = _useState2[1];
+  React.useEffect(function () {
+    if (typeof window === undefined) return;
+    setMobile(isMobile());
+  }, []);
+  return mobile;
+};
+var useViewport = function useViewport() {
+  var _useState3 = React.useState({
+      width: window.innerWidth,
+      isMobile: window.innerWidth < breakpoints.sm,
+      isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
+      isDesktop: window.innerWidth >= breakpoints.md
+    }),
+    viewport = _useState3[0],
+    setViewport = _useState3[1];
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      setViewport({
+        width: window.innerWidth,
+        isMobile: window.innerWidth < breakpoints.sm,
+        isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
+        isDesktop: window.innerWidth >= breakpoints.md
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return viewport;
+};
+
 var SocialLinks = function SocialLinks(_ref) {
   var items = _ref.items;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, items.map(function (mediaLink, idx) {
     return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
       key: mediaLink.name + "-" + idx,
@@ -4990,7 +5181,8 @@ var SocialLinks = function SocialLinks(_ref) {
       "aria-label": mediaLink.name,
       rel: "noopener noreferrer" // Ensures security for external links
       ,
-      target: "_blank"
+      target: "_blank",
+      tabIndex: isMobile ? 1 : undefined
     }, /*#__PURE__*/React__default.createElement(Icon, {
       iconName: mediaLink.name,
       color: "white",
@@ -5004,8 +5196,8 @@ var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_
   var isMenuOpen = _ref.isMenuOpen;
   return isMenuOpen && "\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: " + zIndexes.overlay + ";\n      background-color: var(--color-base-white);\n      overflow-y: auto;\n      scrollbar-width: none;\n      ::-webkit-scrollbar {\n        display: none;\n      }\n    ";
 });
-var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-white);\n  width: 100vw;\n  position: absolute;\n  z-index: ", ";\n  opacity: 0;\n  animation: fadeIn 0.3s ease forwards;\n\n  @media ", " {\n    top: 230px;\n    background-color: var(--color-base-black);\n  }\n\n  @keyframes fadeIn {\n    to {\n      opacity: 0.5;\n    }\n  }\n"])), zIndexes.searchOverlay, devices.mobileAndTablet);
-var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--color-base-white);\n  height: 140px;\n  width: 100%;\n  z-index: ", ";\n\n  @media ", " {\n    height: 60px;\n  }\n"])), zIndexes.navigation, devices.mobileAndTablet);
+var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-white);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: ", ";\n  opacity: 0;\n  animation: fadeIn 0.3s ease forwards;\n\n  @media ", " {\n    top: 230px;\n    background-color: var(--color-base-black);\n  }\n\n  @keyframes fadeIn {\n    to {\n      opacity: 0.5;\n    }\n  }\n"])), zIndexes.searchOverlay, devices.mobileAndTablet);
+var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--color-base-white);\n  height: 140px;\n  justify-content: space-evenly;\n  width: 100%;\n  z-index: ", ";\n\n  @media ", " {\n    height: 60px;\n  }\n"])), zIndexes.navigation, devices.mobileAndTablet);
 var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease,\n    visibility 0.3s ease;\n  background-color: var(--color-base-white);\n  height: 100px;\n  border-top: 1px solid var(--color-base-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 86px;\n    top: 144px;\n  }\n"])), function (_ref2) {
   var visible = _ref2.visible;
   return visible ? 'visible' : 'hidden';
@@ -5031,13 +5223,13 @@ var MobileMenuContainer = /*#__PURE__*/styled__default(Grid)(_templateObject7$2
   var showSearch = _ref8.showSearch;
   return showSearch ? '110px' : '12px';
 });
-var LogoContainer = /*#__PURE__*/styled__default.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 80px;\n  }\n\n  span > svg path,\n  span > svg g path {\n    fill: var(--color-primary-black);\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
-var LogoContainerMobile = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 235px;\n    padding: 16px;\n\n    &&& .logoImg {\n      width: 235px;\n    }\n\n    span > svg path {\n      fill: var(--color-primary-black);\n    }\n  }\n"])), devices.mobileAndTablet);
-var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 140px;\n  width: 100%;\n\n  @media ", " {\n  flex-direction: row;\n  justify-content: space-between;\n  height: 60px;\n  width 100%;\n  }\n"])), devices.mobileAndTablet);
-var NavWrapper = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 50%;\n  width: 100%;\n  gap: 32px;\n\n  @media ", " {\n    flex-direction: row;\n    height: 60px;\n    width: 30%;\n    justify-content: flex-end;\n  }\n"])), devices.mobileAndTablet);
-var NavContainer = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 50%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  flex-gap: 32px;\n  width: fit-content;\n\n  @media ", " {\n    flex-gap: 0;\n    height: auto;\n    width: fit-content;\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobileAndTablet);
+var LogoContainer = /*#__PURE__*/styled__default.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 80px;\n  }\n\n  span > svg path,\n  span > svg g path {\n    fill: var(--color-primary-black);\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+var LogoContainerMobile = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n\n    span > svg path {\n      fill: var(--color-primary-black);\n    }\n  }\n"])), devices.mobileAndTablet);
+var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 140px;\n  justify-content: space-evenly;\n  width: 100%;\n\n  @media ", " {\n  flex-direction: row;\n  justify-content: space-between;\n  height: 60px;\n  width 100%;\n  }\n"])), devices.mobileAndTablet);
+var NavWrapper = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 32px;\n\n  @media ", " {\n    flex-direction: row;\n    height: 60px;\n    justify-content: flex-end;\n  }\n"])), devices.mobileAndTablet);
+var NavContainer = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  flex-gap: 32px;\n  width: fit-content;\n\n  @media ", " {\n    flex-gap: 0;\n    height: auto;\n    width: fit-content;\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobileAndTablet);
 var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 50%;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 var NavTopContainerMobile = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    width: fit-content;\n    align-items: center;\n    height: 10%;\n    margin-left: 20px;\n    padding-bottom: 36px;\n  }\n"])), devices.mobileAndTablet);
 
 var _templateObject$y;
@@ -5059,7 +5251,7 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$z || (_te
 });
 var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  position: absolute;\n  top: 8px;\n  margin-left: 6px;\n"])));
-var BasketInfo = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    width: max-content;\n  }\n"])), devices.mobileAndTablet);
+var BasketInfo = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  @media ", " {\n    width: max-content;\n  }\n"])), devices.mobileAndTablet);
 var BasketNum = /*#__PURE__*/styled__default.span(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-white);\n  font-size: 10px;\n  font-family: var(--font-family-sans);\n"])));
 var BasketText = /*#__PURE__*/styled__default.a(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  color: var(--color-primary-black);\n  margin-left: 6px;\n  text-decoration: none;\n"])));
 
@@ -5604,78 +5796,6 @@ var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$a || (_te
 var TextLinkWrapper$1 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-red);\n"])));
 var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-right: 8px;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 
-// WARNING: Do not use this on server side rendering, it may throw an error.
-var isIOS = function isIOS() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof navigator === undefined) return false;
-    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
-    // iPad on iOS 13 detection
-    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
-  } catch (e) {
-    console.warn('Error checking if device is iOS.', e);
-    return false;
-  }
-};
-// React hook version of isIOS (for server side rendering)
-var useIOS = function useIOS() {
-  var _useState = React.useState(false),
-    IOS = _useState[0],
-    setIOS = _useState[1];
-  React.useEffect(function () {
-    if (typeof navigator === undefined) return;
-    setIOS(isIOS());
-  }, []);
-  return IOS;
-};
-// Checks device size based on window width
-var isMobile = function isMobile() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof window === undefined) return false;
-    return window.innerWidth < breakpoints.sm;
-  } catch (e) {
-    console.warn('Error checking if device is mobile.', e);
-    return false;
-  }
-};
-// React hook version of isMobile (for server side rendering)
-var useMobile = function useMobile() {
-  var _useState2 = React.useState(false),
-    mobile = _useState2[0],
-    setMobile = _useState2[1];
-  React.useEffect(function () {
-    if (typeof window === undefined) return;
-    setMobile(isMobile());
-  }, []);
-  return mobile;
-};
-var useViewport = function useViewport() {
-  var _useState3 = React.useState({
-      width: window.innerWidth,
-      isMobile: window.innerWidth < breakpoints.sm,
-      isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
-      isDesktop: window.innerWidth >= breakpoints.md
-    }),
-    viewport = _useState3[0],
-    setViewport = _useState3[1];
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      setViewport({
-        width: window.innerWidth,
-        isMobile: window.innerWidth < breakpoints.sm,
-        isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
-        isDesktop: window.innerWidth >= breakpoints.md
-      });
-    };
-    window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-  return viewport;
-};
-
 var SearchBar = function SearchBar(_ref) {
   var onClick = _ref.onClick,
     onClose = _ref.onClose,
@@ -5783,7 +5903,8 @@ var Navigation = function Navigation(_ref) {
     menuData = _ref.menuData,
     onSearch = _ref.onSearch,
     onLink = _ref.onLink,
-    crest = _ref.crest,
+    _ref$crest = _ref.crest,
+    crest = _ref$crest === void 0 ? true : _ref$crest,
     className = _ref.className;
   var _useState = React.useState(dataNavTop),
     navTopData = _useState[0],
@@ -5929,13 +6050,16 @@ var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templat
 
 var PolicyLinks = function PolicyLinks(_ref) {
   var items = _ref.items;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, items.map(function (link, idx) {
     return /*#__PURE__*/React__default.createElement(PolicyLinksTextLinkWrapper, {
       key: link.href + "-" + idx,
       target: link.href,
       href: link.href,
       "data-roh": link.dataRoh,
-      "aria-label": link.title
+      "aria-label": link.title,
+      tabIndex: isMobile ? 4 : undefined
     }, link.title);
   }));
 };
@@ -5955,7 +6079,9 @@ var Footer = function Footer(_ref) {
   var _useViewport = useViewport(),
     isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(FooterSection, {
-    className: className
+    className: className,
+    "aria-label": "Footer",
+    role: "contentinfo"
   }, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksSection, {
     "data-testid": "policy-links"
   }, /*#__PURE__*/React__default.createElement(PolicyLinks, {
@@ -5966,14 +6092,16 @@ var Footer = function Footer(_ref) {
     items: rawSocialMediaLinks
   }), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
     href: contact.href,
-    "aria-label": contact.title
+    "aria-label": contact.title,
+    tabIndex: isMobile ? 2 : undefined
   }, contact.title)), /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "large",
     color: "white"
   }, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
     href: newsletter.link.href,
     "data-roh": newsletter.link.dataRoh,
-    "aria-label": newsletter.link.title
+    "aria-label": newsletter.link.title,
+    tabIndex: isMobile ? 3 : undefined
   }, newsletter.link.title))), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "arts-logo"
   }, /*#__PURE__*/React__default.createElement("a", Object.assign({
@@ -6264,7 +6392,7 @@ var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_te
 var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      align-items: center;\n      margin-left: var(--grid-margin);\n      padding: 12px 0;\n    }\n  }\n"])), devices.mobile);
 
 var _excluded$f = ["text"],
-  _excluded2 = ["text"];
+  _excluded2$1 = ["text"];
 var TitleWithCTA = function TitleWithCTA(_ref) {
   var title = _ref.title,
     links = _ref.links,
@@ -6276,7 +6404,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
     primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
   var _ref3 = (links == null ? void 0 : links[1]) || {},
     secondaryButtonText = _ref3.text,
-    secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
   return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
     sticky: sticky
   }, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
@@ -6891,7 +7019,7 @@ var TextOnly = function TextOnly(_ref) {
   })));
 };
 
-// eslint-disable-next-line no-shadow
+/* eslint-disable no-shadow */
 (function (CarouselType) {
   CarouselType["Image"] = "image";
   CarouselType["SmallCard"] = "SmallCard";
@@ -6905,31 +7033,6 @@ var TextOnly = function TextOnly(_ref) {
   ButtonType["Tertiary"] = "Tertiary";
 })(exports.ButtonType || (exports.ButtonType = {}));
 
-var IInformationCtaVariant;
-(function (IInformationCtaVariant) {
-  IInformationCtaVariant["Primary"] = "Primary";
-  IInformationCtaVariant["Secondary"] = "Secondary";
-  IInformationCtaVariant["Tertiary"] = "Tertiary";
-  IInformationCtaVariant["TextLink"] = "TextLink";
-})(IInformationCtaVariant || (IInformationCtaVariant = {}));
-var IInformationCtaTheme;
-(function (IInformationCtaTheme) {
-  IInformationCtaTheme["Cinema"] = "Cinema";
-  IInformationCtaTheme["Core"] = "Core";
-  IInformationCtaTheme["Stream"] = "Stream";
-})(IInformationCtaTheme || (IInformationCtaTheme = {}));
-var IInformationTitleVariant;
-(function (IInformationTitleVariant) {
-  IInformationTitleVariant["Header"] = "Header";
-  IInformationTitleVariant["AltHeader"] = "AltHeader";
-})(IInformationTitleVariant || (IInformationTitleVariant = {}));
-(function (IInformationBackgroundColour) {
-  IInformationBackgroundColour["Cinema"] = "cinema";
-  IInformationBackgroundColour["Core"] = "core";
-  IInformationBackgroundColour["Stream"] = "stream";
-  IInformationBackgroundColour["White"] = "white";
-})(exports.IInformationBackgroundColour || (exports.IInformationBackgroundColour = {}));
-
 var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$4;
 var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-light-grey);\n  padding: 40px;\n\n  display: block;\n  position: relative;\n\n  @media ", " {\n    margin-top: 0;\n    padding: 40px 20px;\n  }\n"])), devices.tablet);
 var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-self: flex-end;\n  height: 15px;\n"])));
@@ -7218,33 +7321,725 @@ var ModalWindow = function ModalWindow(_ref) {
   })), /*#__PURE__*/React__default.createElement(ContentWrapper, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
 };
 
-var _templateObject$N, _templateObject2$A, _templateObject3$o, _templateObject4$j, _templateObject5$e, _templateObject6$c;
-var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
-var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-light-grey);\n  width: 100%;\n"])));
-var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  visibility: ", ";\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n  \n  @media print { \n    visibility: visible;\n  }\n}\n"])), function (_ref) {
-  var isVisible = _ref.isVisible;
-  return isVisible ? 'visible' : 'hidden';
-}, devices.mobile);
-var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  div {\n    margin: 21px 20px;\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
-var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n  max-height: ", ";\n\n  @media print {\n    max-height: max-content;\n  }\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref2) {
-  var textHeight = _ref2.textHeight;
-  return textHeight;
-}, devices.mobile);
-var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media print {\n    display: none;\n  }\n"])));
+var GRID_COLUMN_GAP = 'var(--grid-column-gap)';
+var GRID_VALUES = {
+  desktop: {
+    gapsNumber: 13,
+    columnsNumber: 13,
+    gapsNumberOffset: 15,
+    columnsNumberOffset: 14,
+    largeCard: {
+      gapsPerSlide: 4,
+      columnsPerSlide: 5
+    },
+    smallCard: {
+      gapsPerSlide: 3,
+      columnsPerSlide: 4
+    }
+  },
+  mobile: {
+    columnsNumber: 12,
+    gapsNumber: 13,
+    columnsPerSlide: 10,
+    gapsPerSlide: 9
+  }
+};
+// Grid Calculations
+var calculateGridColumnWidth = function calculateGridColumnWidth(gridGapsNumber, gridColumnsNumber) {
+  return "calc((100% - (" + gridGapsNumber + " * " + GRID_COLUMN_GAP + ")) / " + gridColumnsNumber + ")";
+};
+var calculateGapsSpaceInMainGrid = function calculateGapsSpaceInMainGrid(gapsNumber) {
+  return "calc(" + gapsNumber + " * " + GRID_COLUMN_GAP + ")";
+};
+var calculateSlideGapsSpace = function calculateSlideGapsSpace(gapsPerSlide) {
+  return "calc(" + GRID_COLUMN_GAP + " * " + gapsPerSlide + ")";
+};
+// Slide styles
+var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type, isActive) {
+  var _GRID_VALUES$desktop = GRID_VALUES.desktop,
+    gapsNumber = _GRID_VALUES$desktop.gapsNumber,
+    columnsNumber = _GRID_VALUES$desktop.columnsNumber,
+    columnsNumberOffset = _GRID_VALUES$desktop.columnsNumberOffset,
+    gapsNumberOffset = _GRID_VALUES$desktop.gapsNumberOffset;
+  var _ref = type === exports.CarouselType.LargeCard ? GRID_VALUES.desktop.largeCard : GRID_VALUES.desktop.smallCard,
+    gapsPerSlide = _ref.gapsPerSlide,
+    columnsPerSlide = _ref.columnsPerSlide;
+  var columns = isActive ? columnsNumberOffset : columnsNumber;
+  var gaps = isActive ? gapsNumberOffset : gapsNumber;
+  var gapsSpaceInMainGrid = calculateGapsSpaceInMainGrid(gaps);
+  var slideGapsSpace = calculateSlideGapsSpace(gapsPerSlide);
+  return "\n      width: calc( (" + columnsPerSlide + " * (100% - " + gapsSpaceInMainGrid + ") / " + columns + ") + " + slideGapsSpace + " );\n      margin-right: " + GRID_COLUMN_GAP + ";\n    ";
+};
+var getCardSlideMobileStyles = function getCardSlideMobileStyles() {
+  var _GRID_VALUES$mobile = GRID_VALUES.mobile,
+    columnsNumber = _GRID_VALUES$mobile.columnsNumber,
+    gapsNumber = _GRID_VALUES$mobile.gapsNumber,
+    columnsPerSlide = _GRID_VALUES$mobile.columnsPerSlide,
+    gapsPerSlide = _GRID_VALUES$mobile.gapsPerSlide;
+  var gridColumnWidth = calculateGridColumnWidth(gapsNumber, columnsNumber);
+  return "\n      width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n      margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n    ";
+};
+var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
+  return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
+};
+
+var _templateObject$N, _templateObject2$A, _templateObject3$o, _templateObject4$j, _templateObject5$e, _templateObject6$c, _templateObject7$7, _templateObject8$5;
+var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    ", "\n  }}\n"])), function (_ref) {
+  var imagesHeightDesktop = _ref.imagesHeightDesktop;
+  return "& {\n      .swipe-slide {\n        height: fit-content;\n        width: auto;\n        margin-right: var(--grid-column-gap);\n\n        > figure {\n          margin: 0px;\n          " + getImageSlideStyles(imagesHeightDesktop) + "\n        }\n      }\n    }";
+}, devices.mobile, function (_ref2) {
+  var imagesHeightDevice = _ref2.imagesHeightDevice;
+  return "&&& {\n        .swipe-slide > figure {\n          " + getImageSlideStyles(imagesHeightDevice) + "\n        }\n      }";
+});
+var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    && {\n      .swipe-slide {\n        ", "\n      }\n    }\n}}"])), function (_ref3) {
+  var type = _ref3.type,
+    isActive = _ref3.isActive;
+  return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type, isActive) + "\n        }\n      }\n    ";
+}, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
+var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile, devices.mobile);
+var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  user-select: text;\n"])));
+var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref4) {
+  var isDescriptionPresent = _ref4.isDescriptionPresent;
+  return isDescriptionPresent && 'margin: 20px 0';
+});
+var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
+var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n\n  @media ", " {\n    grid-column: 2 / span 13;\n  }\n"])), function (_ref5) {
+  var active = _ref5.active;
+  return active ? 'grid-column: 1 / span 16' : '';
+}, devices.tablet, devices.mobile);
 
-/* eslint-disable react/no-unstable-nested-components */
-var Accordion = function Accordion(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? '' : _ref$title,
-    _ref$showLine = _ref.showLine,
-    showLine = _ref$showLine === void 0 ? true : _ref$showLine,
-    children = _ref.children,
-    visibleStandfirst = _ref.visibleStandfirst,
-    _ref$initOpen = _ref.initOpen,
-    initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
-    _ref$contentType = _ref.contentType,
-    contentType = _ref$contentType === void 0 ? 'subtitle' : _ref$contentType,
-    _ref$semanticLevel = _ref.semanticLevel,
+var _templateObject$O, _templateObject2$B;
+var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
+var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n"])));
+var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  transition: ", ";\n  transform: translateX(", ");\n\n  .", " {\n    flex-shrink: 0;\n  }\n"])), function (_ref) {
+  var transitioning = _ref.transitioning;
+  return transitioning ? 'transform 0.3s ease' : 'none';
+}, function (_ref2) {
+  var translateX = _ref2.translateX;
+  return translateX + "px";
+}, SWIPE_SLIDE_CLASS_NAME);
+
+/**
+ * Generates a random string in the format XXX-XXX.
+ * Does not meet UUID standards.
+ * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
+ *
+ * @return {string} A random string in the format XXX-XXX.
+ */
+var generateDomElementId = function generateDomElementId() {
+  var randomPart = Math.floor(100 + Math.random() * 900).toString();
+  var datePart = Date.now().toString().slice(-3);
+  return randomPart + "-" + datePart;
+};
+
+var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
+  var widthSoFar = 0;
+  var visible = [];
+  for (var i = currentIndex; i < slidesLength; i++) {
+    var _slideWidths$i;
+    var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
+    if (widthSoFar + width > containerWidth) break;
+    visible.push(i);
+    widthSoFar += width;
+  }
+  return visible;
+};
+var getMovedSlides = function getMovedSlides(delta, slideWidths) {
+  var absDelta = Math.abs(delta);
+  var movedSlides = 0;
+  var accumulated = 0;
+  for (var i = 0; i < slideWidths.length; i++) {
+    accumulated += slideWidths[i];
+    // Allow partial slide (e.g. 50% of next slide) to count
+    var partialThreshold = slideWidths[i] * 0.5;
+    if (absDelta > accumulated - partialThreshold) {
+      movedSlides++;
+    } else {
+      break;
+    }
+  }
+  return movedSlides;
+};
+
+var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "onActiveChange"];
+var MAX_CLONES_NUMBER = 6;
+var CLICK_DRAG_THRESHOLD = 10;
+var getClonesCount = function getClonesCount(infinite, childrenLength) {
+  if (!infinite) return 0;
+  if (childrenLength > MAX_CLONES_NUMBER) return MAX_CLONES_NUMBER;
+  return childrenLength;
+};
+var getSlidedWidth = function getSlidedWidth(slide) {
+  if (!slide) return 0;
+  var style = window.getComputedStyle(slide);
+  var marginLeft = parseFloat(style.marginLeft) || 0;
+  var marginRight = parseFloat(style.marginRight) || 0;
+  return slide.getBoundingClientRect().width + marginLeft + marginRight;
+};
+var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$infinite = _ref.infinite,
+    infinite = _ref$infinite === void 0 ? false : _ref$infinite,
+    onIndexChange = _ref.onIndexChange,
+    _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
+    slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
+    onActiveChange = _ref.onActiveChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+  var containerRef = React.useRef(null);
+  var childRefs = React.useRef([]);
+  var startX = React.useRef(0);
+  var currentTranslate = React.useRef(0);
+  var isDragging = React.useRef(false);
+  var isMouseDown = React.useRef(false);
+  var isActive = React.useRef(false);
+  var isClickPrevented = React.useRef(false);
+  var uniqueIdRef = React.useRef(generateDomElementId());
+  var _useState = React.useState(null),
+    dragTranslateX = _useState[0],
+    setDragTranslateX = _useState[1];
+  var _useState2 = React.useState(false),
+    transitioning = _useState2[0],
+    setTransitioning = _useState2[1];
+  var _useState3 = React.useState([]),
+    slideWidths = _useState3[0],
+    setSlideWidths = _useState3[1];
+  var _useState4 = React.useState(0),
+    containerWidth = _useState4[0],
+    setContainerWidth = _useState4[1];
+  var _useMemo = React.useMemo(function () {
+      var count = getClonesCount(infinite, children.length);
+      var leftClones = infinite ? children.slice(-count) : [];
+      var rightClones = infinite ? children.slice(0, count) : [];
+      var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
+      return {
+        slides: allSlides,
+        clonesCount: count
+      };
+    }, [children, infinite]),
+    slides = _useMemo.slides,
+    clonesCount = _useMemo.clonesCount;
+  var _useState5 = React.useState(infinite ? clonesCount : 0),
+    currentIndex = _useState5[0],
+    setCurrentIndex = _useState5[1];
+  React.useEffect(function () {
+    var handler = function handler(e) {
+      if (isClickPrevented.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    var containerElement = containerRef.current;
+    containerElement == null || containerElement.addEventListener('click', handler, true);
+    return function () {
+      return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
+    };
+  }, []);
+  React.useEffect(function () {
+    if (!onIndexChange) return;
+    if (!infinite) {
+      onIndexChange(currentIndex);
+    } else {
+      var offset = currentIndex - clonesCount + children.length;
+      var realIndex = offset % children.length;
+      onIndexChange(realIndex);
+    }
+  }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
+  var updateDimensions = React.useCallback(function () {
+    if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
+    if (childRefs.current.length) setSlideWidths(childRefs.current.map(getSlidedWidth));
+  }, []);
+  React.useEffect(function () {
+    var animationFrameRequestId = requestAnimationFrame(updateDimensions);
+    return function () {
+      return cancelAnimationFrame(animationFrameRequestId);
+    };
+  }, [children]);
+  React.useEffect(function () {
+    var observer = new ResizeObserver(updateDimensions);
+    if (containerRef.current) observer.observe(containerRef.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [children]);
+  var setIsActive = function setIsActive() {
+    if (!isActive.current) {
+      isActive.current = true;
+      onActiveChange == null || onActiveChange(true);
+    }
+  };
+  var getTranslateX = function getTranslateX() {
+    var offset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
+      return acc + width;
+    }, 0);
+    return offset + (slidesOffsetBefore || 0);
+  };
+  var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
+    var delta = currentTranslate.current - getTranslateX();
+    var direction = delta > 0 ? -1 : 1;
+    var movedSlides = getMovedSlides(delta, slideWidths);
+    if (Math.abs(delta) > 20) {
+      movedSlides = Math.max(1, movedSlides);
+      var targetIndex = currentIndex + direction * movedSlides;
+      var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
+      setTransitioning(true);
+      setCurrentIndex(finalIndex);
+    } else {
+      setTransitioning(true);
+      setCurrentIndex(function (prev) {
+        return prev;
+      });
+    }
+    setDragTranslateX(null);
+  };
+  var canMoveNext = function canMoveNext() {
+    var totalVisibleWidth = slideWidths.slice(currentIndex).reduce(function (acc, width) {
+      return acc + width;
+    }, 0);
+    return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 0);
+  };
+  var handleTransitionEnd = function handleTransitionEnd() {
+    setTransitioning(false);
+    if (!infinite) return;
+    if (currentIndex >= children.length + clonesCount) {
+      setCurrentIndex(clonesCount);
+    } else if (currentIndex < clonesCount) {
+      setCurrentIndex(children.length + currentIndex);
+    }
+  };
+  var goToPrev = function goToPrev() {
+    if (transitioning) return;
+    setIsActive();
+    setTransitioning(true);
+    setCurrentIndex(function (prev) {
+      return infinite ? prev - 1 : Math.max(0, prev - 1);
+    });
+  };
+  var goToNext = function goToNext() {
+    if (transitioning || !canMoveNext()) return;
+    setIsActive();
+    setTransitioning(true);
+    setCurrentIndex(function (prev) {
+      return infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
+    });
+  };
+  React.useImperativeHandle(ref, function () {
+    return {
+      nextSlide: goToNext,
+      prevSlide: goToPrev
+    };
+  });
+  var handleTouchStart = function handleTouchStart(e) {
+    setIsActive();
+    startX.current = e.touches[0].clientX;
+    isDragging.current = true;
+    isClickPrevented.current = false;
+    setTransitioning(false);
+  };
+  var handleTouchMove = function handleTouchMove(e) {
+    if (!isDragging.current) return;
+    var deltaX = e.touches[0].clientX - startX.current;
+    if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
+      isClickPrevented.current = true;
+    }
+    var visualOffset = getTranslateX() + deltaX;
+    currentTranslate.current = visualOffset;
+    setDragTranslateX(visualOffset);
+  };
+  var handleTouchEnd = function handleTouchEnd() {
+    isDragging.current = false;
+    navigateOnSwipeEnd();
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (!isDragging.current || !isMouseDown.current || transitioning) return;
+    var deltaX = e.clientX - startX.current;
+    if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
+      isClickPrevented.current = true;
+    }
+    var visualOffset = getTranslateX() + deltaX;
+    currentTranslate.current = visualOffset;
+    setDragTranslateX(visualOffset);
+  };
+  var _handleMouseUp = function handleMouseUp() {
+    if (!isMouseDown.current) return;
+    isMouseDown.current = false;
+    isDragging.current = false;
+    if (isClickPrevented.current) {
+      navigateOnSwipeEnd();
+    } else {
+      setDragTranslateX(null);
+    }
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', _handleMouseUp);
+  };
+  var handleMouseDown = function handleMouseDown(e) {
+    if (transitioning || e.button !== 0) return;
+    e.preventDefault();
+    setIsActive();
+    startX.current = e.clientX;
+    isDragging.current = true;
+    isMouseDown.current = true;
+    isClickPrevented.current = false;
+    setTransitioning(false);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', _handleMouseUp);
+  };
+  var onSlideFocus = function onSlideFocus(isVisible, index) {
+    if (!isVisible) {
+      setCurrentIndex(index);
+    }
+  };
+  var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
+  return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
+    ref: containerRef,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+    onMouseDown: handleMouseDown,
+    className: "swipe"
+  }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
+    className: "swipe-track-wrapper",
+    translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
+    transitioning: transitioning && dragTranslateX === null,
+    onTransitionEnd: handleTransitionEnd
+  }, slides.map(function (child, index) {
+    var isVisible = visibleIndexes.includes(index);
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
+      ariaHidden: !isVisible,
+      className: SWIPE_SLIDE_CLASS_NAME,
+      ref: function ref(el) {
+        childRefs.current[index] = el;
+      },
+      onFocus: function onFocus() {
+        return onSlideFocus(isVisible, index);
+      }
+    });
+  })));
+});
+Swipe.displayName = 'Swipe';
+
+var SCREEN_WIDTH_PERCENTAGE = 0.05;
+var GRID_OFFSET_MARGIN = {
+  mobile: 0,
+  tablet: 15,
+  desktop: 3
+};
+var Carousel = function Carousel(_ref) {
+  var children = _ref.children,
+    type = _ref.type,
+    title = _ref.title,
+    description = _ref.description,
+    className = _ref.className,
+    _ref$titleSemanticLev = _ref.titleSemanticLevel,
+    titleSemanticLevel = _ref$titleSemanticLev === void 0 ? 3 : _ref$titleSemanticLev,
+    _ref$imagesHeightDevi = _ref.imagesHeightDevice,
+    imagesHeightDevice = _ref$imagesHeightDevi === void 0 ? 300 : _ref$imagesHeightDevi,
+    _ref$imagesHeightDesk = _ref.imagesHeightDesktop,
+    imagesHeightDesktop = _ref$imagesHeightDesk === void 0 ? 500 : _ref$imagesHeightDesk,
+    _ref$infinite = _ref.infinite,
+    infinite = _ref$infinite === void 0 ? true : _ref$infinite,
+    _ref$useOffset = _ref.useOffset,
+    useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
+  var _useState = React.useState(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var _useState2 = React.useState(0),
+    slidesOffsetBefore = _useState2[0],
+    setSlidesOffsetBefore = _useState2[1];
+  var swipeRef = React.useRef(null);
+  React.useEffect(function () {
+    if (!useOffset || !active) return undefined;
+    var updateWindowDimensions = function updateWindowDimensions() {
+      if (window.matchMedia(devices.mobile).matches) {
+        setSlidesOffsetBefore(GRID_OFFSET_MARGIN.mobile);
+      } else if (window.matchMedia(devices.tablet).matches) {
+        setSlidesOffsetBefore(GRID_OFFSET_MARGIN.tablet);
+      } else {
+        setSlidesOffsetBefore(Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop);
+      }
+    };
+    window.addEventListener('resize', updateWindowDimensions);
+    updateWindowDimensions();
+    return function () {
+      window.removeEventListener('resize', updateWindowDimensions);
+    };
+  }, [useOffset, active]);
+  var onNext = function onNext() {
+    var _swipeRef$current;
+    (_swipeRef$current = swipeRef.current) == null || _swipeRef$current.nextSlide();
+  };
+  var onPrev = function onPrev() {
+    var _swipeRef$current2;
+    (_swipeRef$current2 = swipeRef.current) == null || _swipeRef$current2.prevSlide();
+  };
+  var onActiveChangeHandler = function onActiveChangeHandler(value) {
+    if (useOffset && !active) {
+      setActive(value);
+    }
+  };
+  var carouselTitleId = "carousel-title-" + title;
+  var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
+  return /*#__PURE__*/React__default.createElement(Wrapper, {
+    className: className,
+    type: type,
+    isActive: active,
+    imagesHeightDevice: imagesHeightDevice,
+    imagesHeightDesktop: imagesHeightDesktop,
+    role: "region",
+    "aria-labelledby": carouselTitleId
+  }, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(TitleGridItem, {
+    columnStartDesktop: 3,
+    columnSpanDesktop: 10,
+    columnStartDevice: 2,
+    columnSpanDevice: 12
+  }, title && (/*#__PURE__*/React__default.createElement(CarouselInfoWrapper, {
+    "data-testid": "carousel-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
+    id: carouselTitleId,
+    isDescriptionPresent: !!description
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    size: "small",
+    serif: true,
+    hierarchy: "h" + titleSemanticLevel
+  }, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
+  }, description)))), /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 14,
+    columnSpanDesktop: 2,
+    columnStartDevice: 12,
+    columnSpanDevice: 2
+  }, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
+    "data-testid": "carousel-buttons-wrapper"
+  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    onClickNext: onNext,
+    onClickPrev: onPrev,
+    availablePrev: true
+  })))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, {
+    active: active,
+    columnStartDesktop: 3,
+    columnSpanDesktop: 14,
+    columnStartDevice: 2,
+    columnSpanDevice: 13
+  }, /*#__PURE__*/React__default.createElement(Swipe, {
+    onActiveChange: function onActiveChange(value) {
+      return onActiveChangeHandler(value);
+    },
+    "data-testid": "carousel-swipe",
+    ref: swipeRef,
+    infinite: infinite,
+    slidesOffsetBefore: slidesOffsetBefore,
+    role: "list",
+    "aria-roledescription": "carousel"
+  }, React__default.Children.toArray(children).map(function (child, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: "carousel-slide-" + index,
+      "aria-roledescription": "slide"
+    }, child);
+  })))));
+};
+
+var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$8, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17;
+var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__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(--color-base-black);\n  color: var(--color-base-white);\n  user-select: none;\n\n  .color-primary {\n    color: var(--color-base-white);\n  }\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$C || (_templateObject2$C = /*#__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  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 12;\n      padding: 12px 0 12px var(--grid-margin);\n      min-height: 64px;\n      box-sizing: border-box;\n      width: 100%;\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: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__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 / 7;\n      padding: 0 12px 12px var(--grid-margin);\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(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n  width: 132px;\n  height: 36px;\n\n  @media ", " {\n    & {\n      margin-bottom: 16px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-bottom: 20px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n\n  h1,\n  h2,\n  h3 {\n    margin-bottom: 8px;\n  }\n"])));
+var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n  }\n"])), devices.mobileAndTablet);
+var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  flex-direction: row;\n\n  @media ", " {\n    & {\n      margin-top: 16px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n    display: flex;\n    flex-direction: column;\n  }\n"])), devices.tablet, devices.mobile);
+var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  .swipe-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: 2 / 7 / 3 / 15;\n\n      .swipe-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swipe-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(_templateObject10$3 || (_templateObject10$3 = /*#__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.mobileAndTablet);
+var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    div {\n      background-color: var(--color-base-black);\n    }\n    svg path {\n      fill: var(--color-base-white);\n    }\n\n    & {\n      display: flex;\n      grid-area: 1 / 12 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n\n  @media ", " {\n    div {\n      background-color: var(--color-base-black);\n    }\n    svg path {\n      fill: var(--color-base-white);\n    }\n\n    & {\n      display: flex;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n"])));
+var FirstButtonComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 16px;\n\n  @media ", " {\n    & {\n      display: flex;\n      flex-direction: column;\n      margin-right: 0;\n      margin-bottom: 10px;\n    }\n  }\n"])), devices.mobile);
+var TimerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobileAndTablet);
+var AdditionalInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 16px;\n  }\n"])), devices.mobileAndTablet);
+var InfoSubtitleWrapper = /*#__PURE__*/styled__default.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 4px;\n"])));
+var VideoWithControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-black);\n  width: 100%;\n  height: 100%;\n\n  .video-with-controls-container {\n    height: 100%;\n  }\n\n  .video-controls-container {\n    display: ", ";\n    position: fixed;\n\n    > div {\n      margin: 0 40px 30px 40px;\n\n      @media ", " {\n        margin: 0 20px 20px 20px;\n      }\n    }\n  }\n\n  button#play {\n    height: 48px;\n    width: 48px;\n  }\n"])), function (_ref) {
+  var isCurrentSlide = _ref.isCurrentSlide;
+  return isCurrentSlide ? 'block' : 'none';
+}, devices.mobile);
+
+var COLORS$3 = {
+  "default": 'var(--button-auxiliary-color)',
+  background: 'var(--button-auxiliary-bg-color)'
+};
+var getTextColor$3 = function getTextColor(_ref) {
+  var textColor = _ref.textColor;
+  return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
+};
+var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
+};
+
+var _templateObject$Q;
+var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 20px;\n  border: none;\n  padding: 0;\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n\n  && span svg * {\n    fill: ", ";\n  }\n\n  .auxiliaryButtonIcon {\n    width: 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
+
+var _excluded$i = ["children", "className"];
+var AuxiliaryButton = function AuxiliaryButton(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+  return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
+    iconClassName: "auxiliaryButtonIcon",
+    className: className
+  }), children);
+};
+
+var _excluded$j = ["text"],
+  _excluded2$2 = ["text"];
+var _buttonTypeToButton;
+var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
+var Buttons = function Buttons(_ref) {
+  var auxiliaryCTA = _ref.auxiliaryCTA,
+    links = _ref.links;
+  var firstButton = links == null ? void 0 : links[0];
+  var _ref2 = firstButton || {},
+    _ref2$text = _ref2.text,
+    firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
+  var secondButton = links == null ? void 0 : links[1];
+  var _ref3 = secondButton || {},
+    _ref3$text = _ref3.text,
+    secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
+    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
+  var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
+  var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : SecondaryButton;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, (firstButton == null ? void 0 : firstButton.text) && (/*#__PURE__*/React__default.createElement(FirstButtonComponentWrapper, null, /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), firstButtonText))), (secondButton == null ? void 0 : secondButton.text) && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), secondButtonText)), auxiliaryCTA && (/*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA, {
+    textColor: ThemeColor['base-white']
+  }), auxiliaryCTA.text))));
+};
+
+var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
+  return htmlString.replace(/<[^>]*>/g, '');
+};
+var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
+  if (addDots === void 0) {
+    addDots = false;
+  }
+  var textContent = stripAllHtmlTags(htmlString);
+  if (textContent.length <= resultLength) {
+    return htmlString;
+  }
+  var accumulatedText = '';
+  var tagStack = [];
+  var charCount = 0;
+  var closeTags = function closeTags() {
+    while (tagStack.length > 0) {
+      accumulatedText += "</" + tagStack.pop() + ">";
+    }
+  };
+  for (var i = 0; i < htmlString.length; i++) {
+    var _char = htmlString[i];
+    if (_char === '<') {
+      accumulatedText += _char;
+      if (htmlString[i + 1] !== '/') {
+        var tagNameEnd = htmlString.indexOf('>', i);
+        var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
+        tagStack.push(tagName);
+        accumulatedText += tagName + ">";
+        i = tagNameEnd;
+      }
+    } else if (_char === '>') {
+      accumulatedText += _char;
+    } else if (charCount < resultLength) {
+      accumulatedText += _char;
+      charCount++;
+    }
+    if (charCount >= resultLength) {
+      if (addDots) {
+        accumulatedText += '...';
+      }
+      break;
+    }
+  }
+  closeTags();
+  return accumulatedText;
+};
+var truncate = function truncate(str, n) {
+  return str.length >= n ? str.substring(0, n) : str;
+};
+var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
+  if (addDots === void 0) {
+    addDots = false;
+  }
+  var nodeString = server.renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
+  return truncateHtmlString(nodeString, resultLength, addDots);
+};
+
+var InfoSection = function InfoSection(_ref) {
+  var logo = _ref.logo,
+    slide = _ref.slide,
+    currentSlideIndex = _ref.currentSlideIndex;
+  var _useState = React.useState([]),
+    finishedTimers = _useState[0],
+    setFinishedTimers = _useState[1];
+  var infoText = slide.infoText,
+    infoTitle = slide.infoTitle,
+    infoTimeframe = slide.infoTimeframe,
+    infoSubtitle = slide.infoSubtitle,
+    timerParams = slide.timerParams,
+    additionalInfo = slide.additionalInfo;
+  var description = infoText ? truncateHtmlString(infoText, 185, true) : '';
+  var handleEndDate = function handleEndDate() {
+    return setFinishedTimers([].concat(finishedTimers, [currentSlideIndex]));
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, timerParams && (/*#__PURE__*/React__default.createElement(TimerWrapper$1, {
+    "data-testid": "highlight-carousel-timer-wrapper"
+  }, finishedTimers.includes(currentSlideIndex) ? (/*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
+    size: "large"
+  }, timerParams.endDateText)) : (/*#__PURE__*/React__default.createElement(Timer, {
+    color: exports.Colors.White,
+    endDateHandler: handleEndDate,
+    endDate: timerParams.endDate,
+    title: timerParams.title
+  })))), logo ? /*#__PURE__*/React__default.createElement(InfoLogoWrapper, null, logo) : null, /*#__PURE__*/React__default.createElement(InfoTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    size: "large",
+    hierarchy: "h3"
+  }, infoTitle), /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    size: "large"
+  }, infoTimeframe)), /*#__PURE__*/React__default.createElement(InfoTextWrapper, null, /*#__PURE__*/React__default.createElement(InfoSubtitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    size: "large"
+  }, infoSubtitle)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
+    dangerouslySetInnerHTML: {
+      __html: description
+    }
+  })), additionalInfo && (/*#__PURE__*/React__default.createElement(AdditionalInfoWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
+  }, additionalInfo)))));
+};
+
+var _templateObject$R, _templateObject2$D, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$e;
+var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
+var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-light-grey);\n  width: 100%;\n"])));
+var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  visibility: ", ";\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n  \n  @media print { \n    visibility: visible;\n  }\n}\n"])), function (_ref) {
+  var isVisible = _ref.isVisible;
+  return isVisible ? 'visible' : 'hidden';
+}, devices.mobile);
+var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  div {\n    margin: 21px 20px;\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
+var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n  max-height: ", ";\n\n  @media print {\n    max-height: max-content;\n  }\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref2) {
+  var textHeight = _ref2.textHeight;
+  return textHeight;
+}, devices.mobile);
+var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media print {\n    display: none;\n  }\n"])));
+
+/* eslint-disable react/no-unstable-nested-components */
+var Accordion = function Accordion(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '' : _ref$title,
+    _ref$showLine = _ref.showLine,
+    showLine = _ref$showLine === void 0 ? true : _ref$showLine,
+    children = _ref.children,
+    visibleStandfirst = _ref.visibleStandfirst,
+    _ref$initOpen = _ref.initOpen,
+    initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
+    _ref$contentType = _ref.contentType,
+    contentType = _ref$contentType === void 0 ? 'subtitle' : _ref$contentType,
+    _ref$semanticLevel = _ref.semanticLevel,
     semanticLevel = _ref$semanticLevel === void 0 ? 4 : _ref$semanticLevel,
     _ref$displayLevel = _ref.displayLevel,
     displayLevel = _ref$displayLevel === void 0 ? 1 : _ref$displayLevel;
@@ -7335,8 +8130,8 @@ var Accordion = function Accordion(_ref) {
   }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
 };
 
-var _templateObject$O;
-var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$S;
+var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 
 var Accordions = function Accordions(_ref) {
   var _ref$items = _ref.items,
@@ -7357,18 +8152,18 @@ var Accordions = function Accordions(_ref) {
   }));
 };
 
-var _templateObject$P, _templateObject2$B, _templateObject3$p, _templateObject4$k, _templateObject5$f;
-var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 28px 0;\n  background-color: var(--announcement-banner-bg-color);\n  color: var(--announcement-banner-color);\n\n  @media ", " {\n    padding: 20px 0;\n  }\n"])), devices.mobile);
-var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  cursor: ", ";\n\n  ", "\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n\n    path {\n      fill: var(--announcement-banner-color);\n    }\n  }\n"])), function (_ref) {
+var _templateObject$T, _templateObject2$E, _templateObject3$r, _templateObject4$m, _templateObject5$h;
+var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 28px 0;\n  background-color: var(--announcement-banner-bg-color);\n  color: var(--announcement-banner-color);\n\n  @media ", " {\n    padding: 20px 0;\n  }\n"])), devices.mobile);
+var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  cursor: ", ";\n\n  ", "\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n\n    path {\n      fill: var(--announcement-banner-color);\n    }\n  }\n"])), function (_ref) {
   var isClickable = _ref.isClickable;
   return isClickable ? 'pointer' : 'default';
 }, function (_ref2) {
   var isClickable = _ref2.isClickable;
   return isClickable && "\n    :hover:not(:active) {\n      && svg path {\n        fill: var(--announcement-banner-hover-color);\n      }\n    }\n    :active {\n      && svg path {\n        fill: var(--announcement-banner-pressed-color);\n      }\n    }\n  ";
 });
-var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-sans);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n  color: var(--announcement-banner-color);\n  a {\n    color: var(--announcement-banner-color);\n    text-decoration: underline;\n  }\n"])));
-var OverlineWrapper = /*#__PURE__*/styled__default(HarmonicOverline)(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 4px;\n  && {\n    color: var(--announcement-banner-color);\n  }\n"])));
-var BannerContentWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    grid-column: 3 / span 10;\n  }\n\n  @media ", ", ", " {\n    && {\n      grid-column: 3 / span 12;\n    }\n  }\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.desktop, devices.largeDesktop, devices.mobile, function (_ref3) {
+var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-sans);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n  color: var(--announcement-banner-color);\n  a {\n    color: var(--announcement-banner-color);\n    text-decoration: underline;\n  }\n\n  * {\n    margin-block-start: 0;\n    margin-block-end: 0;\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n  }\n"])));
+var OverlineWrapper = /*#__PURE__*/styled__default(HarmonicOverline)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 4px;\n  && {\n    color: var(--announcement-banner-color);\n  }\n"])));
+var BannerContentWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    grid-column: 3 / span 10;\n  }\n\n  @media ", ", ", " {\n    && {\n      grid-column: 3 / span 12;\n    }\n  }\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.desktop, devices.largeDesktop, devices.mobile, function (_ref3) {
   var variant = _ref3.variant;
   return variant === BannerVariants['service-persistent'] ? '8px' : '0px';
 }, function (_ref4) {
@@ -7440,109 +8235,76 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
   }))))));
 };
 
-var COLORS$3 = {
-  "default": 'var(--button-auxiliary-color)',
-  background: 'var(--button-auxiliary-bg-color)'
-};
-var getTextColor$2 = function getTextColor(_ref) {
-  var textColor = _ref.textColor;
-  return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
-};
-var getBackgroundColor$2 = function getBackgroundColor(_ref2) {
-  var backgroundColor = _ref2.backgroundColor;
-  return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
-};
-
-var _templateObject$Q;
-var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 20px;\n  border: none;\n  padding: 0;\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n\n  && span svg * {\n    fill: ", ";\n  }\n\n  .auxiliaryButtonIcon {\n    width: 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), getBackgroundColor$2, getTextColor$2, getTextColor$2);
-
-var _excluded$h = ["children", "className"];
-var AuxiliaryButton = function AuxiliaryButton(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
-  return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
-    iconClassName: "auxiliaryButtonIcon",
-    className: className
-  }), children);
-};
-
-var _templateObject$R, _templateObject2$C, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$d, _templateObject7$7, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
+var _templateObject$U, _templateObject2$F, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$f, _templateObject7$9, _templateObject8$7, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT$1 = 19;
 var LENGTH_TEXT_TABLET = 10;
-var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
+var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
   var isCardClickable = _ref.isCardClickable;
   return isCardClickable ? 'pointer' : 'default';
 }, function (_ref2) {
   var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
   return !onlyShowButtonsOnHover ? "height: 100%;\n       display: flex;\n       flex-direction: column;\n       justify-content: space-between;  \n    " : '';
 });
-var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref3) {
-  var lineColor = _ref3.lineColor,
-    theme = _ref3.theme;
-  if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
-  return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
-}, zIndexes.contentOverlay);
-var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
-var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref4) {
-  var fullWidth = _ref4.fullWidth;
+var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 4px;\n  background-color: var(--button-bg-color);\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), zIndexes.contentOverlay);
+var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -6px;\n"])));
+var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 24px;\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref3) {
+  var fullWidth = _ref3.fullWidth;
   return fullWidth ? '0' : '20px';
-}, function (_ref5) {
-  var fullWidth = _ref5.fullWidth;
+}, function (_ref4) {
+  var fullWidth = _ref4.fullWidth;
   return fullWidth ? '0' : '20px';
 });
-var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
-var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobileAndTablet);
-var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__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-top: var(--editorial-spacing-hover);\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 HighlightTextContainer = /*#__PURE__*/styled__default(TextContainer$2)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-primary);\n  margin-top: 4px;\n"])));
-var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$3 || (_templateObject9$3 = /*#__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-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref6) {
-  var isVisible = _ref6.isVisible;
+var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 12px 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 12px 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
+var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n"])));
+var HighlightTextContainer = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n"])));
+var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 4px;\n  overflow-wrap: break-word;\n"])));
+var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 26px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref5) {
+  var isVisible = _ref5.isVisible;
   return isVisible ? "visible" : 'hidden';
-}, devices.mobile, function (_ref7) {
-  var isGridCard = _ref7.isGridCard;
+}, devices.mobile, function (_ref6) {
+  var isGridCard = _ref6.isGridCard;
   return isGridCard ? '20px' : '0';
 });
-var ExtraActionsContainer = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref8) {
-  var fullWidth = _ref8.fullWidth;
+var ExtraActionsContainer = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 26px;\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref7) {
+  var fullWidth = _ref7.fullWidth;
   return fullWidth ? '0' : '20px';
-}, function (_ref9) {
-  var fullWidth = _ref9.fullWidth;
+}, function (_ref8) {
+  var fullWidth = _ref8.fullWidth;
   return fullWidth ? '0' : '20px';
 });
-var LabelElements = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref10) {
-  var bgColor = _ref10.bgColor,
-    theme = _ref10.theme;
-  return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
+var LabelElements = /*#__PURE__*/styled__default.div(_templateObject12$2 || (_templateObject12$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 26px;\n  padding: 0 8px;\n  background-color: ", ";\n"])), function (_ref9) {
+  var bgColor = _ref9.bgColor;
+  return bgColor ? "var(--color-base-" + bgColor + ")" : 'var(--color-primary-background)';
 });
-var LabelIconWrapper = /*#__PURE__*/styled__default.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
-var getButtonsOpacity = function getButtonsOpacity(_ref11) {
-  var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
+var LabelIconWrapper = /*#__PURE__*/styled__default.div(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
+var getButtonsOpacity = function getButtonsOpacity(_ref10) {
+  var onlyShowButtonsOnHover = _ref10.onlyShowButtonsOnHover;
   return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
 };
-var getButtonsMinHeight = function getButtonsMinHeight(_ref12) {
-  var onlyShowButtonsOnHover = _ref12.onlyShowButtonsOnHover;
+var getButtonsMinHeight = function getButtonsMinHeight(_ref11) {
+  var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
   return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
 };
-var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref13) {
-  var size = _ref13.size,
-    primaryButtonTextLength = _ref13.primaryButtonTextLength,
-    tertiaryButtonTextLength = _ref13.tertiaryButtonTextLength;
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 24px;\n  margin-top: 24px;\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref12) {
+  var size = _ref12.size,
+    primaryButtonTextLength = _ref12.primaryButtonTextLength,
+    tertiaryButtonTextLength = _ref12.tertiaryButtonTextLength;
   var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT$1 || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT$1 : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
   if (isLinksLayoutColumn) {
     return "\n        flex-direction: column;\n      ";
   }
   return '';
-}, devices.mobile, getButtonsMinHeight, function (_ref14) {
-  var fullWidth = _ref14.fullWidth;
+}, devices.mobile, getButtonsMinHeight, function (_ref13) {
+  var fullWidth = _ref13.fullWidth;
   return fullWidth ? '0' : '20px';
-}, function (_ref15) {
-  var fullWidth = _ref15.fullWidth;
+}, function (_ref14) {
+  var fullWidth = _ref14.fullWidth;
   return fullWidth ? '0' : '20px';
-}, devices.tablet, getButtonsMinHeight, function (_ref16) {
-  var primaryButtonTextLength = _ref16.primaryButtonTextLength,
-    tertiaryButtonTextLength = _ref16.tertiaryButtonTextLength;
+}, devices.tablet, getButtonsMinHeight, function (_ref15) {
+  var primaryButtonTextLength = _ref15.primaryButtonTextLength,
+    tertiaryButtonTextLength = _ref15.tertiaryButtonTextLength;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
   if (isLinksLayoutColumnTablet) {
     return "\n          flex-direction: column;\n        ";
@@ -7550,69 +8312,12 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14$1 ||
   return '';
 });
 
-var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
-  return htmlString.replace(/<[^>]*>/g, '');
-};
-var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
-  if (addDots === void 0) {
-    addDots = false;
-  }
-  var textContent = stripAllHtmlTags(htmlString);
-  if (textContent.length <= resultLength) {
-    return htmlString;
-  }
-  var accumulatedText = '';
-  var tagStack = [];
-  var charCount = 0;
-  var closeTags = function closeTags() {
-    while (tagStack.length > 0) {
-      accumulatedText += "</" + tagStack.pop() + ">";
-    }
-  };
-  for (var i = 0; i < htmlString.length; i++) {
-    var _char = htmlString[i];
-    if (_char === '<') {
-      accumulatedText += _char;
-      if (htmlString[i + 1] !== '/') {
-        var tagNameEnd = htmlString.indexOf('>', i);
-        var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
-        tagStack.push(tagName);
-        accumulatedText += tagName + ">";
-        i = tagNameEnd;
-      }
-    } else if (_char === '>') {
-      accumulatedText += _char;
-    } else if (charCount < resultLength) {
-      accumulatedText += _char;
-      charCount++;
-    }
-    if (charCount >= resultLength) {
-      if (addDots) {
-        accumulatedText += '...';
-      }
-      break;
-    }
-  }
-  closeTags();
-  return accumulatedText;
-};
-var truncate = function truncate(str, n) {
-  return str.length >= n ? str.substring(0, n) : str;
-};
-var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
-  if (addDots === void 0) {
-    addDots = false;
-  }
-  var nodeString = server.renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
-  return truncateHtmlString(nodeString, resultLength, addDots);
-};
-
-var _excluded$i = ["text"],
-  _excluded2$1 = ["text"];
-var _buttonTypeToButton;
+var _excluded$k = ["text"],
+  _excluded2$3 = ["text"];
+var _buttonTypeToButton$1;
 var LENGTH_LARGE_TEXT$1 = 28;
 var LENGTH_SMALL_TEXT$2 = 19;
-var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
+var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
 var Card = function Card(_ref) {
   var _labelParams$color;
   var _ref$progress = _ref.progress,
@@ -7650,18 +8355,20 @@ var Card = function Card(_ref) {
   var _useState = React.useState(false),
     hovered = _useState[0],
     setHovered = _useState[1];
+  var cardTitleId = "card-title-" + title;
+  var cardDescriptionId = "card-desc-" + title;
   var truncatedText = truncateHtmlString(text, 185, true);
   var firstButton = links == null ? void 0 : links[0];
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
   var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
     secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
+    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
   var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
   var hoverHandler = function hoverHandler(value) {
     if (value) {
@@ -7673,8 +8380,8 @@ var Card = function Card(_ref) {
     }
     setHovered(value);
   };
-  var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
-  var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : TertiaryButton;
+  var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
+  var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
   return /*#__PURE__*/React__default.createElement(CardContainer, {
     onMouseOver: function onMouseOver() {
       return onlyShowButtonsOnHover ? hoverHandler(true) : undefined;
@@ -7684,21 +8391,26 @@ var Card = function Card(_ref) {
     },
     onlyShowButtonsOnHover: onlyShowButtonsOnHover,
     "data-testid": "cardcontainer",
-    isCardClickable: !!firstButton
+    isCardClickable: !!firstButton,
+    role: "region",
+    "aria-labelledby": cardTitleId,
+    "aria-describedby": cardDescriptionId
   }, /*#__PURE__*/React__default.createElement("a", {
     href: firstButton == null ? void 0 : firstButton.href,
     target: firstButton == null ? void 0 : firstButton.target,
     className: "targetLink",
     style: {
       flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
-    }
+    },
+    "aria-label": "Navigate to " + title
   }, /*#__PURE__*/React__default.createElement(LabelContainer, {
     isGridCard: isGridCard,
     isVisible: !!labelParams
   }, labelParams && (/*#__PURE__*/React__default.createElement(LabelElements, {
     bgColor: labelParams == null ? void 0 : labelParams.bgColor
-  }, /*#__PURE__*/React__default.createElement(Overline, {
-    level: 2
+  }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    size: "small",
+    color: "white"
   }, labelParams.text.substring(0, 25)), labelParams.iconName && (/*#__PURE__*/React__default.createElement(LabelIconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: labelParams.iconName,
     direction: labelParams.iconDirection,
@@ -7710,24 +8422,36 @@ var Card = function Card(_ref) {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
     src: image,
-    alt: imageAltText
+    alt: imageAltText || title
   })), withContinueWatching && (/*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
     progress: progress,
-    height: 10
+    height: 6
   }))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
     fullWidth: fullWidth
   }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
     list: tags
-  }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, null, /*#__PURE__*/React__default.createElement(Header, {
-    level: size === 'small' ? 6 : 5
-  }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, null, /*#__PURE__*/React__default.createElement(Header, {
-    level: 6
-  }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer$2, {
+  }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, {
+    id: cardTitleId
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: "h3",
+    size: "small"
+  }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, {
+    id: cardTitleId
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: "h3",
+    size: "medium"
+  }, title)), subtitle ? (/*#__PURE__*/React__default.createElement(SubtitleContainer, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    size: "large"
+  }, subtitle))) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(TextContainer$2, {
+    id: cardDescriptionId,
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
-  }), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
+  })), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large",
+    color: "red"
   }, highlightText))))), auxiliaryCTA && (/*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
     fullWidth: fullWidth
   }, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text))), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
@@ -7739,12 +8463,16 @@ var Card = function Card(_ref) {
     tertiaryButtonTextLength: secondButtonText.length,
     onlyShowButtonsOnHover: onlyShowButtonsOnHover,
     fullWidth: fullWidth
-  }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)))));
+  }, firstButton && (/*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({
+    "aria-label": firstButtonText
+  }, restFirstButton), primaryButtonTextTruncate)), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({
+    "aria-label": secondButtonText
+  }, restSecondButton), tertiaryButtonTextTruncate)))));
 };
 
-var _templateObject$S, _templateObject2$D;
-var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n    grid-row-gap: var(--cards-spacing-stack);\n  }\n"])), devices.mobile);
-var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
+var _templateObject$V, _templateObject2$G;
+var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n    grid-row-gap: var(--cards-spacing-stack);\n  }\n"])), devices.mobile);
+var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
 
 var Cards = function Cards(_ref) {
   var cards = _ref.cards,
@@ -7786,18 +8514,18 @@ var Cards = function Cards(_ref) {
   }));
 };
 
-var _templateObject$T, _templateObject2$E, _templateObject3$r, _templateObject4$m, _templateObject5$h;
-var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > div {\n    margin-bottom: 2px;\n\n    &:first-child {\n      margin-bottom: 4px;\n\n      @media ", " {\n        margin-bottom: 6px;\n      }\n    }\n  }\n\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobile, devices.mobileAndTablet);
-var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  padding: 30px 0;\n\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), function (_ref) {
+var _templateObject$W, _templateObject2$H, _templateObject3$t, _templateObject4$o, _templateObject5$j;
+var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > div {\n    margin-bottom: 2px;\n\n    &:first-child {\n      margin-bottom: 4px;\n\n      @media ", " {\n        margin-bottom: 6px;\n      }\n    }\n  }\n\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobile, devices.mobileAndTablet);
+var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  padding: 30px 0;\n\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), function (_ref) {
   var hideBottomBorder = _ref.hideBottomBorder;
   return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
 }, function (_ref2) {
   var hideTopBorder = _ref2.hideTopBorder;
   return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
 }, devices.mobileAndTablet);
-var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  & > div {\n    margin-bottom: 2px;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
-var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media ", " {\n    flex-direction: column;\n    margin: 4px 0;\n  }\n\n  a {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-decoration: underline;\n\n    &:before {\n      display: inline-block;\n      content: '';\n      background-color: var(--base-color-black);\n      width: 1px;\n      height: 18px;\n      margin: 0 8px -4px;\n\n      @media ", " {\n        display: none;\n      }\n    }\n\n    &:first-child:before {\n      display: none;\n    }\n  }\n"])), devices.mobile, devices.mobile);
+var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  & > div {\n    margin-bottom: 2px;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
+var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media ", " {\n    flex-direction: column;\n    margin: 4px 0;\n  }\n\n  a {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-decoration: underline;\n\n    &:before {\n      display: inline-block;\n      content: '';\n      background-color: var(--base-color-black);\n      width: 1px;\n      height: 18px;\n      margin: 0 8px -4px;\n\n      @media ", " {\n        display: none;\n      }\n    }\n\n    &:first-child:before {\n      display: none;\n    }\n  }\n"])), devices.mobile, devices.mobile);
 
 var divideAddressString = function divideAddressString(address) {
   return address.split(',').map(function (chunk, i) {
@@ -7854,18 +8582,18 @@ var ContactCard = function ContactCard(_ref) {
   }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
 };
 
-var _templateObject$U, _templateObject2$F, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$e, _templateObject7$8;
-var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 24px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
+var _templateObject$X, _templateObject2$I, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$g, _templateObject7$a;
+var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 24px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
   return props.clickable ? 'pointer' : 'default';
 }, devices.mobile);
-var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
-var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  gap: 22px;\n\n  & > * {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  @media ", " {\n    margin: 0 20px;\n    gap: 12px;\n  }\n\n  & .content-summary-text-link {\n    height: unset;\n  }\n"])), function (props) {
+var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
+var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  gap: 22px;\n\n  & > * {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  @media ", " {\n    margin: 0 20px;\n    gap: 12px;\n  }\n\n  & .content-summary-text-link {\n    height: unset;\n  }\n"])), function (props) {
   return props.showImage ? 2 : '1 / span 4';
 }, devices.mobile);
-var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin: 0;\n  }\n\n  @media ", " {\n    & > * {\n      font-size: var(--font-size-header-5);\n      font-weight: var(--font-weight-header-5);\n    }\n  }\n"])), devices.mobile);
-var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n"])));
-var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & p:not(:last-child):after {\n    content: '\\A\\A';\n    white-space: pre;\n  }\n\n  ", "\n"], ["\n  & p:not(:last-child):after {\n    content: '\\\\A\\\\A';\n    white-space: pre;\n  }\n\n  ", "\n"])), function (props) {
+var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin: 0;\n  }\n\n  @media ", " {\n    & > * {\n      font-size: var(--font-size-header-5);\n      font-weight: var(--font-weight-header-5);\n    }\n  }\n"])), devices.mobile);
+var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n"])));
+var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & p:not(:last-child):after {\n    content: '\\A\\A';\n    white-space: pre;\n  }\n\n  ", "\n"], ["\n  & p:not(:last-child):after {\n    content: '\\\\A\\\\A';\n    white-space: pre;\n  }\n\n  ", "\n"])), function (props) {
   return !!props.truncate && "\n    overflow: hidden;\n    position: relative;\n    display: -webkit-box;\n    -webkit-line-clamp: " + props.truncate + ";\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    min-height: 1em;\n    max-height: 3em;\n  ";
 });
 
@@ -7937,21 +8665,21 @@ var ContentSummary = function ContentSummary(_ref) {
   }), link.text))));
 };
 
-var _templateObject$V, _templateObject2$G, _templateObject3$t, _templateObject4$o, _templateObject5$j;
-var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-column-gap);\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content 24px min-content;\n      grid-template-areas:\n        'row1'\n        '.'\n        'row2';\n    }\n  }\n"])), function (_ref) {
+var _templateObject$Y, _templateObject2$J, _templateObject3$v, _templateObject4$q, _templateObject5$l;
+var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-column-gap);\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content 24px min-content;\n      grid-template-areas:\n        'row1'\n        '.'\n        'row2';\n    }\n  }\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
 }, devices.mobile);
-var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-self: center;\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
+var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-self: center;\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref3) {
+var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$o || (_templateObject4$o = /*#__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 EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__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 EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$q || (_templateObject4$q = /*#__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 EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__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 Editorial = function Editorial(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -7982,26 +8710,82 @@ var Editorial = function Editorial(_ref) {
   })))));
 };
 
-var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$p, _templateObject5$k;
-var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-altHeader);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n  -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n  -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  word-break: var(--word-break-altHeader);\n"])));
-var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
-var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 32px 0;\n\n  ", "}\n"])), function (props) {
-  if (!props.infoThemed) {
-    return '';
+var InformationCtaVariants = {
+  Primary: 'Primary',
+  Secondary: 'Secondary',
+  Tertiary: 'Tertiary',
+  TextLink: 'TextLink'
+};
+
+var COLORS$4 = {
+  "default": 'var(--information-panel-button-color)',
+  background: 'var(--information-panel-button-bg-color)',
+  hover: 'var(--information-panel-button-hover-color)',
+  pressed: 'var(--information-panel-button-pressed-color)'
+};
+var getTextColor$4 = function getTextColor(variant, theme, colorValue) {
+  if (theme === exports.ThemeType.Cinema && (variant === InformationCtaVariants.Tertiary || variant === InformationCtaVariants.TextLink)) {
+    return 'var(--color-primary-black)';
   }
-  if (props.variant === IInformationCtaVariant.Primary || props.variant === IInformationCtaVariant.Secondary) {
-    return "a {\n            color: var(--base-color-black);\n            background: var(--base-color-white);\n            border-color: var(--base-color-transparent);\n          }";
+  if (variant === InformationCtaVariants.Primary) {
+    return COLORS$4["default"];
   }
-  return "a {\n            color: var(--base-color-white);\n            background: var(--base-color-transparent});\n          }\n            svg > path {\n              fill: var(--base-color-white);\n              stroke: var(--base-color-white);\n              stroke-width: 1;\n            }\n          ";
-});
-var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: ", ";\n  background: ", "\n  }};\n"])), function (props) {
-  return props.background !== exports.IInformationBackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
-}, function (props) {
-  return "var(--base-color-" + props.background + ")";
-});
-var InfoBodyWrapper = /*#__PURE__*/styled__default('div')(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), function (props) {
-  return props.background === exports.IInformationBackgroundColour.White ? 'var(--base-color-black)' : 'var(--base-color-white)';
+  return colorValue;
+};
+var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
+  return variant === InformationCtaVariants.Primary || variant === undefined ? "background-color: " + colorValue + ";" : '';
+};
+var getBorderColor$1 = function getBorderColor(variant, colorValue) {
+  return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
+};
+
+var _templateObject$Z, _templateObject2$K, _templateObject3$w, _templateObject4$r;
+var InfoWrapper$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: var(--information-panel-color);\n  background-color: var(--information-panel-bg-color);\n\n  @media ", " {\n    padding: 40px 0;\n  }\n"])), devices.mobile);
+var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
+var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 16px;\n  }\n\n  a {\n    color: ", ";\n    ", "\n    ", "\n\n    svg path {\n      fill: ", ";\n    }\n\n    :hover:not(:active) {\n      color: ", ";\n      ", "\n      ", "\n\n      svg path {\n        fill: ", ";\n      }\n    }\n\n    :active {\n      color: ", ";\n      ", "\n      ", "\n\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n"])), devices.mobile, function (_ref) {
+  var variant = _ref.variant,
+    theme = _ref.theme;
+  return getTextColor$4(variant, theme, COLORS$4.background);
+}, function (_ref2) {
+  var variant = _ref2.variant;
+  return getBackgroundColor$2(variant, COLORS$4.background);
+}, function (_ref3) {
+  var variant = _ref3.variant;
+  return getBorderColor$1(variant, COLORS$4.background);
+}, function (_ref4) {
+  var variant = _ref4.variant,
+    theme = _ref4.theme;
+  return getTextColor$4(variant, theme, COLORS$4.background);
+}, function (_ref5) {
+  var variant = _ref5.variant,
+    theme = _ref5.theme;
+  return getTextColor$4(variant, theme, COLORS$4.hover);
+}, function (_ref6) {
+  var variant = _ref6.variant;
+  return getBackgroundColor$2(variant, COLORS$4.hover);
+}, function (_ref7) {
+  var variant = _ref7.variant;
+  return getBorderColor$1(variant, COLORS$4.hover);
+}, function (_ref8) {
+  var variant = _ref8.variant,
+    theme = _ref8.theme;
+  return getTextColor$4(variant, theme, COLORS$4.hover);
+}, function (_ref9) {
+  var variant = _ref9.variant,
+    theme = _ref9.theme;
+  return getTextColor$4(variant, theme, COLORS$4.pressed);
+}, function (_ref10) {
+  var variant = _ref10.variant;
+  return getBackgroundColor$2(variant, COLORS$4.pressed);
+}, function (_ref11) {
+  var variant = _ref11.variant;
+  return getBorderColor$1(variant, COLORS$4.pressed);
+}, function (_ref12) {
+  var variant = _ref12.variant,
+    theme = _ref12.theme;
+  return getTextColor$4(variant, theme, COLORS$4.pressed);
 });
+var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--information-panel-color);\n\n  a {\n    text-decoration: underline;\n    color: var(--information-panel-color);\n  }\n\n  @media ", " {\n    padding-top: 4px;\n  }\n"])), devices.mobile);
 
 // Helper function for rendering buttons based on the variant
 var renderButton = function renderButton(_ref) {
@@ -8012,7 +8796,7 @@ var renderButton = function renderButton(_ref) {
     iconDirection = _ref.iconDirection,
     target = _ref.target;
   switch (variant) {
-    case IInformationCtaVariant.Secondary:
+    case InformationCtaVariants.Secondary:
       return /*#__PURE__*/React__default.createElement(SecondaryButton, {
         href: link,
         iconName: iconName,
@@ -8020,13 +8804,13 @@ var renderButton = function renderButton(_ref) {
         target: target,
         "aria-label": text
       }, text);
-    case IInformationCtaVariant.Tertiary:
+    case InformationCtaVariants.Tertiary:
       return /*#__PURE__*/React__default.createElement(TertiaryButton, {
         href: link,
         target: target,
         "aria-label": text
       }, text);
-    case IInformationCtaVariant.TextLink:
+    case InformationCtaVariants.TextLink:
       return /*#__PURE__*/React__default.createElement(TextLink, {
         href: link,
         iconName: iconName,
@@ -8046,17 +8830,17 @@ var renderButton = function renderButton(_ref) {
 };
 var InfoCta = function InfoCta(_ref2) {
   var _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? IInformationCtaVariant.Primary : _ref2$variant,
+    variant = _ref2$variant === void 0 ? InformationCtaVariants.Primary : _ref2$variant,
     link = _ref2.link,
     text = _ref2.text,
     iconName = _ref2.iconName,
     iconDirection = _ref2.iconDirection,
-    infoThemed = _ref2.infoThemed,
     _ref2$target = _ref2.target,
-    target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target;
+    target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target,
+    theme = _ref2.theme;
   return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
     variant: variant,
-    infoThemed: infoThemed
+    theme: theme
   }, renderButton({
     variant: variant,
     link: link,
@@ -8072,40 +8856,28 @@ var smallColumnSpan = 4;
 var largeColumnSpan = 9;
 var mediumWordBreakpoint = 8;
 var longWordBreakpoint = 13;
-var getColumnSpan = function getColumnSpan(variant, textSize, longestWordLength) {
-  if (variant !== IInformationTitleVariant.Header || textSize !== 4) return defaultColumnSpan;
+var getColumnSpan = function getColumnSpan(longestWordLength) {
   if (longestWordLength > longWordBreakpoint) return largeColumnSpan;
   if (longestWordLength < mediumWordBreakpoint) return smallColumnSpan;
   return defaultColumnSpan;
 };
-var renderTitle = function renderTitle(props) {
-  var headerLevel = props.variant === IInformationTitleVariant.Header && props.textSize < 4 ? 4 : props.textSize;
-  return props.variant === IInformationTitleVariant.Header ? (/*#__PURE__*/React__default.createElement(Header, {
-    level: headerLevel
-  }, props.text)) : (/*#__PURE__*/React__default.createElement(AltHeader, {
-    level: headerLevel
-  }, props.text));
-};
 var Information = function Information(_ref) {
   var body = _ref.body,
     title = _ref.title,
-    background = _ref.background,
     cta = _ref.cta,
-    className = _ref.className;
+    className = _ref.className,
+    theme = _ref.theme;
   var safeTitle = title || {
     text: '',
-    variant: IInformationTitleVariant.Header,
-    textSize: 5
+    textSize: 'medium'
   }; // Provide a fallback
   var titleWords = safeTitle.text.split(' ');
   var titleWordLengths = titleWords.map(function (word) {
     return word.length;
   });
   var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
-  var titleColumnSpan = getColumnSpan(safeTitle.variant, safeTitle.textSize, maxTitleWordLength);
-  var bgColour = background != null ? background : exports.IInformationBackgroundColour.White;
-  return /*#__PURE__*/React__default.createElement(InfoWrapper, {
-    background: bgColour,
+  var titleColumnSpan = getColumnSpan(maxTitleWordLength);
+  return /*#__PURE__*/React__default.createElement(InfoWrapper$1, {
     "data-testid": "infoWrapper",
     className: className
   }, /*#__PURE__*/React__default.createElement(GridItem, {
@@ -8113,50 +8885,53 @@ var Information = function Information(_ref) {
     columnStartDevice: 2,
     columnSpanDesktop: titleColumnSpan,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(InfoTitle, null, renderTitle(safeTitle))), /*#__PURE__*/React__default.createElement(GridItem, {
+  }, /*#__PURE__*/React__default.createElement(InfoTitle, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: "h2",
+    size: safeTitle.textSize,
+    color: "inherit"
+  }, safeTitle.text))), /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: titleColumnSpan + 2,
     columnStartDevice: 2,
     columnSpanDesktop: 14 - titleColumnSpan,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(InfoContent, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
-    background: bgColour,
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
     dangerouslySetInnerHTML: {
       __html: body
     }
   }), cta && (/*#__PURE__*/React__default.createElement(InfoCta, {
     link: cta.link,
     variant: cta.variant,
-    infoThemed: bgColour !== exports.IInformationBackgroundColour.White,
     text: cta.text,
     iconName: cta.iconName,
     iconDirection: cta.iconDirection,
-    target: cta.target
+    target: cta.target,
+    theme: theme
   })))));
 };
 
-var _templateObject$X, _templateObject2$I, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$f, _templateObject7$9, _templateObject8$6;
-var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  // remove spacing above/below for all semantic levels of the title\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+var _templateObject$_, _templateObject2$L, _templateObject3$x, _templateObject4$s, _templateObject5$m, _templateObject6$h, _templateObject7$b, _templateObject8$8;
+var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  // remove spacing above/below for all semantic levels of the title\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
   var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    padding-bottom: 42px;\n  ";
 }, devices.mobile);
-var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title 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\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
-var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
+var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title 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\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
+var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
   var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin-top: 42px;\n  ";
 }, devices.mobile);
-var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 43px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 33px;\n      margin-top: 10px;\n      margin-bottom: 20px;\n    }\n  }\n"])), function (_ref4) {
+var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 43px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 33px;\n      margin-top: 10px;\n      margin-bottom: 20px;\n    }\n  }\n"])), function (_ref4) {
   var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
 }, devices.mobile);
-var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
-var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
-var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
-var PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-family: var(--font-family-altHeader);\n  text-transform: var(--text-transform-altHeader);\n  word-break: var(--word-break-altHeader);\n"])));
+var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
+var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
+var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
+var PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-family: var(--font-family-altHeader);\n  text-transform: var(--text-transform-altHeader);\n  word-break: var(--word-break-altHeader);\n"])));
 
-var _excluded$j = ["text"];
+var _excluded$l = ["text"];
 var PageHeading = function PageHeading(_ref) {
   var title = _ref.title,
     text = _ref.text,
@@ -8172,14 +8947,14 @@ var PageHeading = function PageHeading(_ref) {
     titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
   var _ref2 = link || {},
     linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
   var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
   var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
   var isTitleUnAvailable = !title;
   return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
     "data-testid": "page-heading-wrapper",
     isPageHeadingWithoutTitle: isTitleUnAvailable
-  }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
+  }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
     "data-testid": "page-heading-title",
     isPageHeadingWithoutTitle: isTitleUnAvailable
   }, children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
@@ -8200,13 +8975,13 @@ var PageHeading = function PageHeading(_ref) {
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
 };
 
-var _excluded$k = ["link"];
+var _excluded$m = ["link"];
 var PageHeadingCore = function PageHeadingCore(_ref) {
   var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   var coreLink = link && _extends({}, link, {
-    color: exports.Colors.White,
-    bgColor: exports.Colors.Black
+    color: ThemeColor['base-white'],
+    bgColor: ThemeColor['base-black']
   });
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Core
@@ -8215,13 +8990,13 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
   })));
 };
 
-var _excluded$l = ["link"];
+var _excluded$n = ["link"];
 var PageHeadingCinema = function PageHeadingCinema(_ref) {
   var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   var cinemaLink = link && _extends({}, link, {
-    color: exports.Colors.Black,
-    bgColor: exports.Colors.White
+    color: ThemeColor['base-black'],
+    bgColor: ThemeColor['base-white']
   });
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Cinema
@@ -8232,17 +9007,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   })));
 };
 
-var _templateObject$Y, _templateObject2$J, _templateObject3$w, _templateObject4$r, _templateObject5$m, _templateObject6$g, _templateObject7$a, _templateObject8$7;
-var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  position: relative;\n  display: flex;\n  background: var(--base-color-black);\n\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n  }\n"])), devices.mobile);
-var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  img {\n    width: 100%;\n    filter: brightness(0.7);\n    opacity: 0.95;\n  }\n\n  @media ", " {\n    height: fit-content;\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n\n    img {\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n"])), devices.mobile);
-var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  align-self: center;\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 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 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    align-content: center;\n\n    & {\n      grid-template-areas:\n        '. . . logo logo logo logo 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  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
-var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__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.sponsorship, devices.mobileAndTablet);
-var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
-var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__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(4 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\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(_templateObject7$a || (_templateObject7$a = /*#__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: 0px;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
-var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
+var _templateObject$$, _templateObject2$M, _templateObject3$y, _templateObject4$t, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9;
+var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  position: relative;\n  display: flex;\n  background: var(--base-color-black);\n\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n  }\n"])), devices.mobile);
+var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  img {\n    width: 100%;\n    filter: brightness(0.7);\n    opacity: 0.95;\n  }\n\n  @media ", " {\n    height: fit-content;\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n\n    img {\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n"])), devices.mobile);
+var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  align-self: center;\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 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 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    align-content: center;\n\n    & {\n      grid-template-areas:\n        '. . . logo logo logo logo 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  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
+var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__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.sponsorship, devices.mobileAndTablet);
+var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
+var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__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(4 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\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(_templateObject7$c || (_templateObject7$c = /*#__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: 0px;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
+var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 
-var _excluded$m = ["text"];
+var _excluded$o = ["text"];
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
     text = _ref.text,
@@ -8260,7 +9035,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var truncatedText = text == null ? void 0 : text.substring(0, 75);
   var _ref2 = link || {},
     linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
     bgUrlDevice: bgUrlDevice,
@@ -8305,21 +9080,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, "Scroll Down"))) : null);
 };
 
-var _templateObject$Z, _templateObject2$K, _templateObject3$x, _templateObject4$s, _templateObject5$n;
-var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
+var _templateObject$10, _templateObject2$N, _templateObject3$z, _templateObject4$u, _templateObject5$o;
+var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
   var color = _ref.color;
   return "\n    background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n    color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n  ";
 }, devices.mobileAndTablet);
-var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0px 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
+var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0px 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
   var hasImage = _ref2.hasImage;
   return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
 }, devices.mobileAndTablet, function (_ref3) {
   var hasImage = _ref3.hasImage;
   return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
 });
-var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--base-color-black);\n\n  @media ", " {\n    grid-area: 2 / 1 / 3 / 15;\n  }\n"])), devices.mobileAndTablet);
-var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px;\n  max-height: 33vw;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
-var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--base-color-black);\n\n  @media ", " {\n    grid-area: 2 / 1 / 3 / 15;\n  }\n"])), devices.mobileAndTablet);
+var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px;\n  max-height: 33vw;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
+var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 
 var PageHeadingPanel = function PageHeadingPanel(_ref) {
   var _image$src, _image$alt;
@@ -8333,7 +9108,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
     "data-testid": "wrapper"
   }, /*#__PURE__*/React__default.createElement(LeftPanel, {
     hasImage: hasImage
-  }, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
+  }, /*#__PURE__*/React__default.createElement(InfoWrapper$2, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
     "data-testid": "scroll-link"
   }, /*#__PURE__*/React__default.createElement(TabLink, {
     iconName: "Arrow",
@@ -8349,16 +9124,16 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
   })))));
 };
 
-var _templateObject$_;
-var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
+var _templateObject$11;
+var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
 
-var _excluded$n = ["link"];
+var _excluded$p = ["link"];
 var PageHeadingStream = function PageHeadingStream(_ref) {
   var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   var streamLink = link && _extends({}, link, {
-    color: exports.Colors.Black,
-    bgColor: exports.Colors.White
+    color: ThemeColor['base-black'],
+    bgColor: ThemeColor['base-white']
   });
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Stream
@@ -8369,12 +9144,199 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }))));
 };
 
-var _templateObject$$, _templateObject2$L, _templateObject3$y, _templateObject5$o, _templateObject6$h, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject10$4;
-var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
-var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
-var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
-var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
-var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$12, _templateObject2$O, _templateObject3$A, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
+var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  picture,\n  img {\n    width: 100%;\n    height: 100%;\n  }\n"])));
+var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__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\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    \n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n"])), zIndexes.sponsorship, devices.mobileAndTablet, devices.tablet);
+var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: var(--grid-outer-margin);\n  bottom: 20px;\n  z-index: 10;\n\n  @media ", " {\n    right: var(--grid-margin);\n    bottom: 10px;\n  }\n"])), devices.tablet);
+var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--heading-promo-bg-color);\n  border-bottom: ", ";\n  display: ", ";\n\n  @media ", " {\n    padding: 12px 0 20px;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
+}, function (_ref2) {
+  var showBlock = _ref2.showBlock;
+  return showBlock ? 'block' : 'none';
+}, devices.mobile);
+var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    height: 32px;\n  }\n\n  @media ", " {\n    margin-bottom: 12px;\n  }\n"])), devices.mobile);
+var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  width: 200px;\n\n  @media ", " {\n    order: ", ";\n    width: 100%;\n    justify-content: center;\n  }\n"])), devices.mobile, function (_ref3) {
+  var isBadgePresent = _ref3.isBadgePresent;
+  return isBadgePresent ? '1' : '4';
+});
+var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: end;\n  width: 200px;\n\n  @media ", " {\n    margin-bottom: ", ";\n    width: 100%;\n    order: 3;\n  }\n"])), devices.mobile, function (_ref4) {
+  var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
+  return isAdditionalButtonPresent ? '20px' : '0';
+});
+var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"])), devices.mobile);
+var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 10px 0;\n\n  h1,\n  h2,\n  h3 {\n    color: ", ";\n  }\n\n  @media ", " {\n    padding: 0;\n    order: 2;\n    margin-bottom: ", ";\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme == exports.ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
+}, devices.mobile, function (_ref6) {
+  var isButtonPresent = _ref6.isButtonPresent;
+  return isButtonPresent ? '20px' : '0';
+});
+var ContentWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media ", " {\n    height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
+
+var PageHeadingPromoBadge;
+(function (PageHeadingPromoBadge) {
+  PageHeadingPromoBadge["Stream"] = "Stream";
+  PageHeadingPromoBadge["Cinema"] = "Cinema";
+})(PageHeadingPromoBadge || (PageHeadingPromoBadge = {}));
+
+var Badge = function Badge(_ref) {
+  var isMobile = _ref.isMobile,
+    theme = _ref.theme,
+    badge = _ref.badge;
+  if (!badge) return null;
+  var color = theme === exports.ThemeType.Cinema ? exports.Colors.Black : exports.Colors.White;
+  var alignment = isMobile ? 'center' : 'left';
+  return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
+    "data-testid": "promo-heading-badge"
+  }, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
+    fillColor: color,
+    align: alignment
+  })) : (/*#__PURE__*/React__default.createElement(StreamBadge, {
+    fillColor: color,
+    align: alignment
+  })));
+};
+
+var StyledPrimaryButton = function StyledPrimaryButton(_ref) {
+  var link = _ref.link,
+    theme = _ref.theme;
+  var text = link.text;
+  if (theme === exports.ThemeType.Cinema) {
+    return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
+      textColor: ThemeColor['base-white'],
+      backgroundColor: ThemeColor['base-black'],
+      hoveredColor: ThemeColor['rbo-black-hovered'],
+      pressedColor: ThemeColor['rbo-black-pressed']
+    }), text);
+  }
+  return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
+    textColor: ThemeColor['base-black'],
+    backgroundColor: ThemeColor['base-white'],
+    hoveredColor: ThemeColor['white-hovered'],
+    pressedColor: ThemeColor['white-pressed']
+  }), text);
+};
+var Button$1 = function Button(_ref2) {
+  var link = _ref2.link,
+    theme = _ref2.theme,
+    isMobile = _ref2.isMobile;
+  var text = link.text;
+  if (isMobile) {
+    return /*#__PURE__*/React__default.createElement(StyledPrimaryButton, {
+      theme: theme,
+      link: link
+    });
+  }
+  var buttonColor = theme === exports.ThemeType.Cinema ? ThemeColor['base-black'] : ThemeColor['base-white'];
+  if (link.isTextLink) {
+    return /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, link, {
+      color: buttonColor,
+      iconName: undefined
+    }), text);
+  }
+  return /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, link, {
+    textColor: buttonColor,
+    borderColor: buttonColor,
+    hoveredColor: buttonColor,
+    pressedColor: buttonColor
+  }), text);
+};
+
+var Image = function Image(_ref) {
+  var desktop = _ref.desktop,
+    mobile = _ref.mobile,
+    alt = _ref.alt;
+  var isMobile = useMobile();
+  return /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: isMobile ? exports.AspectRatio['75:32'] : exports.AspectRatio['90:17']
+  }, /*#__PURE__*/React__default.createElement("picture", {
+    "data-testid": "promo-heading-picture"
+  }, /*#__PURE__*/React__default.createElement("source", {
+    srcSet: mobile,
+    media: "(max-width: 768px)"
+  }), /*#__PURE__*/React__default.createElement("source", {
+    srcSet: desktop,
+    media: "(min-width: 769px)"
+  }), /*#__PURE__*/React__default.createElement("img", {
+    src: desktop,
+    alt: alt,
+    "data-testid": "promo-heading-image"
+  })));
+};
+
+var TITLE_MAX_LENGTH = 40;
+var PageHeadingPromo = function PageHeadingPromo(_ref) {
+  var _ref$sponsor = _ref.sponsor,
+    sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
+    className = _ref.className,
+    theme = _ref.theme,
+    badge = _ref.badge,
+    mainLink = _ref.mainLink,
+    title = _ref.title,
+    titleSemanticLevel = _ref.titleSemanticLevel,
+    additionalLink = _ref.additionalLink,
+    image = _ref.image;
+  var isMobile = useMobile();
+  var showImageButton = !title && !badge && !additionalLink && !isMobile;
+  var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
+  var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
+  return /*#__PURE__*/React__default.createElement(Wrapper$5, {
+    className: className
+  }, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
+    "data-testid": "promo-heading-sponsor"
+  }, /*#__PURE__*/React__default.createElement(Sponsorship, null))), /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(Image, {
+    mobile: image.mobile,
+    desktop: image.desktop,
+    alt: image.alt
+  }), showImageButton && mainLink && (/*#__PURE__*/React__default.createElement(ImageButtonWrapper, {
+    "data-testid": "promo-heading-image-button"
+  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, mainLink, {
+    textColor: ThemeColor['base-black'],
+    backgroundColor: ThemeColor['base-white'],
+    hoveredColor: ThemeColor['white-hovered'],
+    pressedColor: ThemeColor['white-pressed']
+  }), mainLink.text)))), /*#__PURE__*/React__default.createElement(ContentSection, {
+    theme: theme,
+    showBlock: showContentBlock
+  }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 2,
+    columnSpanDesktop: 14,
+    columnStartDevice: 2,
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(ContentWrapper$2, {
+    theme: theme
+  }, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
+    isBadgePresent: !!badge
+  }, /*#__PURE__*/React__default.createElement(Badge, {
+    theme: theme,
+    badge: badge,
+    isMobile: isMobile
+  }), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    theme: theme,
+    link: additionalLink
+  }))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
+    theme: theme,
+    isButtonPresent: !!mainLink || !!additionalLink
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
+    size: "large"
+  }, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
+    isAdditionalButtonPresent: !!additionalLink && !badge
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    theme: theme,
+    link: mainLink,
+    isMobile: isMobile
+  }))))))));
+};
+
+var _templateObject$13, _templateObject2$P, _templateObject3$B, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6;
+var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
+var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
+var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
+var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
+var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
   var invert = _ref.invert,
     theme = _ref.theme;
   return invert ? theme.colors.white : theme.colors.primary;
@@ -8390,10 +9352,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
   var theme = _ref4.theme;
   return theme.colors.primary === theme.colors.stream && "\n      color: " + theme.colors.stream + ";\n      background-color: " + theme.colors.white + ";\n    ";
 }, devices.tablet, devices.mobile);
-var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  padding-left: 50px;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n  @media ", " {\n    width: fit-content;\n  }\n"])), devices.mobile, devices.tablet);
-var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  text-align: center;\n  padding: 0 2em;\n  @media ", " {\n    justify-content: center;\n  }\n"])), devices.mobile);
-var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  padding-right: 50px;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobile);
-var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
+var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  padding-left: 50px;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n  @media ", " {\n    width: fit-content;\n  }\n"])), devices.mobile, devices.tablet);
+var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  text-align: center;\n  padding: 0 2em;\n  @media ", " {\n    justify-content: center;\n  }\n"])), devices.mobile);
+var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  padding-right: 50px;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobile);
+var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject10$6 || (_templateObject10$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
   var invert = _ref5.invert,
     theme = _ref5.theme;
   return invert ? theme.colors.primary : theme.colors.white;
@@ -8445,7 +9407,7 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
   // eslint-disable-next-line react-hooks/rules-of-hooks
   var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
   var target = sameSiteUrl ? '_self' : '_blank';
-  var color = invert ? exports.Colors.Black : exports.Colors.White;
+  var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
   switch (brandingStyle) {
     case 'BlockText':
       return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
@@ -8482,7 +9444,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
 
-var _excluded$o = ["text"];
+var _excluded$q = ["text"];
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -8589,7 +9551,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$o);
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$q);
   var titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
     elementId: 'compact-header-video',
@@ -8627,15 +9589,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   }), linkText))))));
 };
 
-var _templateObject$10, _templateObject2$M, _templateObject3$z, _templateObject4$t;
-var MorePages = /*#__PURE__*/styled__default.span(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
-var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 40px;\n  margin-bottom: 40px;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0);\n  }\n"])));
+var _templateObject$14, _templateObject2$Q, _templateObject3$C, _templateObject4$w;
+var MorePages = /*#__PURE__*/styled__default.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
+var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 40px;\n  margin-bottom: 40px;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0);\n  }\n"])));
 // PageNumber extends bodyText but uses subtitle-1 font size
-var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: inherit;\n  margin: 0;\n  border-bottom: 1px solid transparent;\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n  :hover {\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n  /* active state - string used because react returns error for bool */\n  ", "\n"])), function (_ref) {
+var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: inherit;\n  margin: 0;\n  border-bottom: 1px solid transparent;\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n  :hover {\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n  /* active state - string used because react returns error for bool */\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   return active === 'true' && " \n      color: var(--base-color-core);\n    ";
 });
-var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
+var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
 
 var reducePages = function reducePages(pages, currentPage) {
   // If there are less than 6 pages, return all pages
@@ -8701,14 +9663,14 @@ var Pagination = function Pagination(_ref) {
   })))));
 };
 
-var _templateObject$11, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$p, _templateObject6$i, _templateObject7$c;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
-var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
-var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
-var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
-var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
-var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
-var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n"])));
+var _templateObject$15, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$f;
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
+var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
+var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
+var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
+var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
+var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
+var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n"])));
 
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -8765,14 +9727,14 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$12, _templateObject2$O, _templateObject3$B, _templateObject4$v;
-var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
-var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
+var _templateObject$16, _templateObject2$S, _templateObject3$E, _templateObject4$y;
+var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
   var columnCount = _ref.columnCount;
   return "repeat(" + columnCount + ", 1fr)";
 }, devices.mobile, devices.tablet);
-var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
-var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
+var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
 
 // Get the total character length of a property in an array of objects
 var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -8832,8 +9794,8 @@ var CreditListing = function CreditListing(_ref) {
           var span = namesLength > characterThreshold ? largeColumnSpan : 1;
           var unboundedEnd = nextColumnStart + span;
           var start = unboundedEnd > columnCount + 1 ? 1 : nextColumnStart;
-          var columnEnd = start + span;
-          nextColumnStart = columnEnd % columnCount || columnCount;
+          var end = start + span;
+          nextColumnStart = end % columnCount || columnCount;
           return {
             columnStart: start,
             columnSpan: span
@@ -8890,14 +9852,14 @@ var CreditListing = function CreditListing(_ref) {
   }, creditEntries);
 };
 
-var _templateObject$13, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$d, _templateObject8$9, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject$17, _templateObject2$T, _templateObject3$F, _templateObject4$z, _templateObject5$s, _templateObject6$m, _templateObject7$g, _templateObject8$c, _templateObject9$7, _templateObject10$7, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 12;
 var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
 var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
 var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
 var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
-var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
+var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
 }, devices.tablet, function (_ref2) {
@@ -8907,9 +9869,9 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 ||
   var asCard = _ref3.asCard;
   return asCard ? "\n    grid-template-areas: " + GridTemplateAsCard + ";\n    @media " + devices.tablet + " {\n      grid-template-areas: " + GridTemplateAsCardTablet + ";\n    }\n  " : "";
 });
-var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$P || (_templateObject2$P = /*#__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 PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__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  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\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: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n"])));
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref4) {
+var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$T || (_templateObject2$T = /*#__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 PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__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  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\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: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n"])));
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref4) {
   var hasTextLinks = _ref4.hasTextLinks;
   return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
 }, function (_ref5) {
@@ -8933,22 +9895,22 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$w ||
   }
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref7) {
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref7) {
   var marginBottom = _ref7.marginBottom;
   return marginBottom + "px";
 });
-var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
-var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
-var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
-var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
-var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
-var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
-var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject12$2 || (_templateObject12$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
-var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var PromoWithTagsTextLink = /*#__PURE__*/styled__default(TextLink)(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var asCardOverrides = /*#__PURE__*/styled.css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", " {\n    font-size: var(--font-size-subtitle-2);\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-1);\n  }\n\n  ", " {\n    flex-direction: row;\n    @media ", " {\n      flex-direction: row;\n    }\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-2);\n    font-weight: var(--font-weight-overline-2);\n    line-height: var(--line-height-overline-2);\n    letter-spacing: var(--letter-spacing-overline-2);\n  }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
-var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: left;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref8) {
+var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
+var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
+var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
+var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
+var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
+var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
+var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject12$3 || (_templateObject12$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
+var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14$3 || (_templateObject14$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var PromoWithTagsTextLink = /*#__PURE__*/styled__default(TextLink)(_templateObject15$2 || (_templateObject15$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var asCardOverrides = /*#__PURE__*/styled.css(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", " {\n    font-size: var(--font-size-subtitle-2);\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-1);\n  }\n\n  ", " {\n    flex-direction: row;\n    @media ", " {\n      flex-direction: row;\n    }\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-2);\n    font-weight: var(--font-weight-overline-2);\n    line-height: var(--line-height-overline-2);\n    letter-spacing: var(--letter-spacing-overline-2);\n  }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
+var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject17$1 || (_templateObject17$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: left;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref8) {
   var imageToLeft = _ref8.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
@@ -8963,16 +9925,16 @@ var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObje
   return asCard && asCardOverrides;
 });
 var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 16px;\n  }\n"])));
-var TimerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
+var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
 var EndDateText = /*#__PURE__*/styled__default.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid var(--base-color-black);\n  padding-bottom: 32px;\n  margin-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 20px;\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
 
-var _excluded$p = ["text"],
-  _excluded2$2 = ["text"],
+var _excluded$r = ["text"],
+  _excluded2$4 = ["text"],
   _excluded3 = ["text"];
-var _buttonTypeToButton$1;
+var _buttonTypeToButton$2;
 var LENGTH_TEXT$1 = 28;
 var LENGTH_TEXT_PARAGRAPH = 130;
-var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
+var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
 var PromoWithTags = function PromoWithTags(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
     imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
@@ -9029,17 +9991,17 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
     secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
+    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
   var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
   var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
-  var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
-  var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
+  var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$2[firstButton.buttonType] : PrimaryButton;
+  var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$2[secondButton.buttonType] : TertiaryButton;
   var textLinkItems = textLinks ? textLinks.map(function (link, index) {
     var _link$text = link.text,
       textLinkText = _link$text === void 0 ? '' : _link$text,
@@ -9057,7 +10019,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
         level: 5
       }, timerParams.endDateText));
     }
-    return /*#__PURE__*/React__default.createElement(TimerWrapper$1, {
+    return /*#__PURE__*/React__default.createElement(TimerWrapper$2, {
       "data-testid": "promo-with-tags-timer-wrapper"
     }, /*#__PURE__*/React__default.createElement(Timer, {
       endDateHandler: function endDateHandler() {
@@ -9142,28 +10104,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$14, _templateObject2$Q, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$e;
+var _templateObject$18, _templateObject2$U, _templateObject3$G, _templateObject4$A, _templateObject5$t, _templateObject6$n, _templateObject7$h;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
+var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
 }, devices.tablet, function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
 }, devices.mobile);
-var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
+var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
+var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 32px;\n\n    @media ", " {\n      & {\n        margin: 0 0 24px;\n      }\n    }\n  }\n"])), devices.mobile);
-var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-sans);\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  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-sans);\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  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: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n"])));
-var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__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 PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 32px;\n\n    @media ", " {\n      & {\n        margin: 0 0 24px;\n      }\n    }\n  }\n"])), devices.mobile);
+var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$t || (_templateObject5$t = /*#__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$n || (_templateObject6$n = /*#__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  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\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: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n"])));
+var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__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,
@@ -9185,8 +10147,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$e ||
   return '';
 });
 
-var _templateObject$15;
-var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\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 _templateObject$19;
+var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\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;
@@ -9217,19 +10179,6 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
   return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
 };
 
-/**
- * Generates a random string in the format XXX-XXX.
- * Does not meet UUID standards.
- * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
- *
- * @return {string} A random string in the format XXX-XXX.
- */
-var generateDomElementId = function generateDomElementId() {
-  var randomPart = Math.floor(100 + Math.random() * 900).toString();
-  var datePart = Date.now().toString().slice(-3);
-  return randomPart + "-" + datePart;
-};
-
 var VideoWithControls$1 = function VideoWithControls(_ref) {
   var video = _ref.video,
     settings = _ref.settings;
@@ -9311,8 +10260,8 @@ var PromoChild = function PromoChild(_ref) {
   }));
 };
 
-var _excluded$q = ["text"],
-  _excluded2$3 = ["text"];
+var _excluded$s = ["text"],
+  _excluded2$5 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -9321,28 +10270,29 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$titleSize = _ref.titleSize,
     titleSize = _ref$titleSize === void 0 ? 'large' : _ref$titleSize,
-    titleHierarchy = _ref.titleHierarchy,
     subtitle = _ref.subtitle,
     text = _ref.text,
     links = _ref.links,
     children = _ref.children,
     videoSettings = _ref.videoSettings,
+    titleSemanticLevel = _ref.titleSemanticLevel,
     className = _ref.className;
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
   };
   var imageToLeft = imagePosition === 'left';
+  var titleLevel = titleSize === 'large' ? 2 : 3;
   var primaryButton = links == null ? void 0 : links[0];
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
     _ref3$text = _ref3.text,
     tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-    restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
+    restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
   var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
   var defaultVideoSettings = {
     muted: true,
@@ -9355,15 +10305,19 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     imageToLeft: imageToLeft,
     className: className,
     "data-testid": "promo-with-title"
-  }, /*#__PURE__*/React__default.createElement(PromoChild, {
+  }, /*#__PURE__*/React__default.createElement(PromoChild
+  // eslint-disable-next-line react/no-children-prop
+  , {
+    // eslint-disable-next-line react/no-children-prop
+    children: children,
     videoSettings: _extends({}, defaultVideoSettings, videoSettings),
     imageToLeft: imageToLeft
-  }, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
+  }), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft
-  }, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    size: titleSize,
-    hierarchy: titleHierarchy
+  }, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
+    level: titleLevel,
+    semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
   }, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
     dangerouslySetInnerHTML: {
       __html: text
@@ -9375,8 +10329,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
 };
 
-var _templateObject$16;
-var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
+var _templateObject$1a;
+var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
 
 /**
  * DEPRECATED. Use RadioGroup2 instead
@@ -9431,9 +10385,9 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var _templateObject$17, _templateObject2$R, _templateObject3$E;
-var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
+var _templateObject$1b, _templateObject2$V, _templateObject3$H;
+var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
   var horizontalMode = _ref.horizontalMode;
   if (horizontalMode) return 'row';
   return 'column';
@@ -9441,7 +10395,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_temp
   var gap = _ref2.gap;
   return gap + "px";
 });
-var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
+var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
   var darkMode = _ref3.darkMode;
   if (darkMode) return 'var(--base-color-white)';
   return 'var(--base-color-errorstate)';
@@ -9518,10 +10472,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
   }, error))));
 };
 
-var _templateObject$18, _templateObject2$S, _templateObject3$F;
-var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-light-grey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
-var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.3s ease-in-out;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n"])));
-var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
+var _templateObject$1c, _templateObject2$W, _templateObject3$I;
+var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-light-grey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
+var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.3s ease-in-out;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n"])));
+var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
 
 /* eslint-disable react/no-danger */
 var StatusBanner = function StatusBanner(_ref) {
@@ -9577,8 +10531,8 @@ var StatusBanner = function StatusBanner(_ref) {
   return null;
 };
 
-var _templateObject$19;
-var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    font-size: var(--font-size-title-description);\n    line-height: var(--line-height-title-description);\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
+var _templateObject$1d;
+var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    font-size: var(--font-size-title-description);\n    line-height: var(--line-height-title-description);\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
 
 var SectionTitle = function SectionTitle(_ref) {
   var title = _ref.title,
@@ -9606,8 +10560,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description)))));
 };
 
-var _templateObject$1a, _templateObject2$T, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject10$6, _templateObject11$3;
-var stateStyles = /*#__PURE__*/styled.css(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:focus,\n  &.focus {\n    outline: ", ";\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    cursor: none;\n  }\n"])), function (_ref) {
+var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$B, _templateObject5$u, _templateObject6$o, _templateObject7$i, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$5;
+var stateStyles = /*#__PURE__*/styled.css(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:focus,\n  &.focus {\n    outline: ", ";\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    cursor: none;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return "3px solid " + theme.colors.lapisLazuli;
 }, function (_ref2) {
@@ -9617,12 +10571,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$1a || (_templateObject
   var theme = _ref3.theme;
   return theme.colors.lightgrey;
 });
-var borderStyles = /*#__PURE__*/styled.css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
+var borderStyles = /*#__PURE__*/styled.css(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.darkgrey;
 });
-var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
+var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
 var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
   var theme = _ref5.theme;
   return {
@@ -9630,11 +10584,11 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
     color: theme.colors.black,
     title: 'Select Arrow'
   };
-})(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n\n  max-width: 24px;\n  max-height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
-var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
-var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
-var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
-var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
+})(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n\n  max-width: 24px;\n  max-height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
+var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
+var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
+var Options = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
+var Option = /*#__PURE__*/styled__default.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
   var theme = _ref6.theme,
     hover = _ref6.hover;
   var _theme$colors = theme.colors,
@@ -9644,9 +10598,9 @@ var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObj
   return "\n        background-color: " + lightgrey + ";\n        &:hover { background-color: " + midgrey + " }\n    ";
 });
 var selectStyles = function selectStyles(width, height) {
-  return styled.css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  * {\n    width: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    top: ", ";\n  }\n  ", " {\n    height: ", ";\n  }\n  p {\n    height: ", ";\n    padding-inline: 20px;\n\n    display: flex;\n    align-items: center;\n  }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
+  return styled.css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  * {\n    width: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    top: ", ";\n  }\n  ", " {\n    height: ", ";\n  }\n  p {\n    height: ", ";\n    padding-inline: 20px;\n\n    display: flex;\n    align-items: center;\n  }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
 };
-var SelectList = /*#__PURE__*/styled__default.ul(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  & ", " {\n    position: absolute;\n\n    top: 13px;\n    right: 16px;\n  }\n"])), function (_ref7) {
+var SelectList = /*#__PURE__*/styled__default.ul(_templateObject11$5 || (_templateObject11$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  & ", " {\n    position: absolute;\n\n    top: 13px;\n    right: 16px;\n  }\n"])), function (_ref7) {
   var width = _ref7.width,
     height = _ref7.height;
   return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
@@ -9940,7 +10894,7 @@ function Select(_ref3) {
     }
     setSelectedValue(options[0]);
   }, [options, resetWhenOptionsUpdate]);
-  return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$6, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
     level: 1,
     tag: "p",
     "data-testid": "select-label"
@@ -9987,9 +10941,9 @@ function Select(_ref3) {
   })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$1b, _templateObject2$U, _templateObject3$H, _templateObject4$z;
-var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-dark-grey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-dark-grey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-light-grey);\n      background: var(--base-color-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-dark-grey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-dark-grey);\n    background: var(--base-color-light-grey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-mid-grey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\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    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
+var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$C;
+var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-dark-grey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-dark-grey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-light-grey);\n      background: var(--base-color-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-dark-grey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-dark-grey);\n    background: var(--base-color-light-grey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-mid-grey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\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    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + "px";
@@ -10006,18 +10960,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_t
   if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
   return "0 0 0 3px var(--base-color-lapislazuli)";
 });
-var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
+var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
   var darkMode = _ref5.darkMode;
   if (darkMode) return "var(--base-color-white)";
   return "var(--base-color-black)";
 });
-var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
+var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
   var darkMode = _ref6.darkMode;
   if (darkMode) return "var(--base-color-white)";
   return "var(--base-color-errorstate)";
 });
 
-var _excluded$r = ["label", "error", "width", "darkMode", "isSearchable", "components"];
+var _excluded$t = ["label", "error", "width", "darkMode", "isSearchable", "components"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -10068,7 +11022,7 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -10086,7 +11040,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
 
-var _excluded$s = ["label", "error", "width", "darkMode", "components"];
+var _excluded$u = ["label", "error", "width", "darkMode", "components"];
 /**
  * The Select2Async component is similar to Select 2, but uses react-select async
  * component for select instead of regular react-select component. This can be used
@@ -10108,7 +11062,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     components = _ref.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -10125,8 +11079,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
   })));
 };
 
-var _templateObject$1c, _templateObject2$V;
-var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_templateObject$1c = /*#__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"])), StyledImageAspectRatioWrapper, function (_ref) {
+var _templateObject$1g, _templateObject2$Z;
+var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1g || (_templateObject$1g = /*#__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"])), StyledImageAspectRatioWrapper, function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -10136,7 +11090,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_temp
     height = _ref2.height;
   return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
 });
-var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$V || (_templateObject2$V = /*#__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 CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$Z || (_templateObject2$Z = /*#__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,
@@ -10157,7 +11111,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
       return window.removeEventListener('resize', setWrapperHeight);
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement(Wrapper$6, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$7, {
     aspectRatio: aspectRatio,
     ref: wrapperRef,
     height: height
@@ -10170,13 +11124,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   })), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
 };
 
-var _templateObject$1d, _templateObject2$W, _templateObject3$I;
-var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
-var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$1h, _templateObject2$_, _templateObject3$L;
+var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
 });
-var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  height: 2px;\n  width: 62px;\n  margin: 32px 0;\n\n  @media ", " {\n    height: 1px;\n    width: 46px;\n    margin: 24px 0;\n  }\n"])), devices.mobile);
+var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  height: 2px;\n  width: 62px;\n  margin: 32px 0;\n\n  @media ", " {\n    height: 1px;\n    width: 46px;\n    margin: 24px 0;\n  }\n"])), devices.mobile);
 
 /* eslint-disable react/no-danger */
 var Quote = function Quote(_ref) {
@@ -10201,13 +11155,13 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$A, _templateObject5$t, _templateObject6$m;
-var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
-var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
-var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
+var _templateObject$1i, _templateObject2$$, _templateObject3$M, _templateObject4$D, _templateObject5$v, _templateObject6$p;
+var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
+var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
+var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
 
 var MiniCard = function MiniCard(_ref) {
   var _ref$title = _ref.title,
@@ -10225,7 +11179,7 @@ var MiniCard = function MiniCard(_ref) {
     columnSpanDevice: 3,
     columnStartDesktop: 1,
     columnSpanDesktop: 3
-  }, /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+  }, /*#__PURE__*/React__default.createElement(ImageWrapper$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement(StyledImage, {
     src: image,
@@ -10240,23 +11194,23 @@ var MiniCard = function MiniCard(_ref) {
     columnSpanDesktop: 4
   }, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
     level: 4
-  }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$2, null, /*#__PURE__*/React__default.createElement(Overline, {
+  }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$4, null, /*#__PURE__*/React__default.createElement(Overline, {
     level: 2
   }, title)))));
 };
 
-var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$B, _templateObject5$u;
-var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
-var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
-var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
+var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$E, _templateObject5$w;
+var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
+var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
+var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
   var isVisible = _ref.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
+var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
   var isVisible = _ref2.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n"])));
+var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n"])));
 
 var keyDown = function keyDown(e, toggleFunction) {
   if (e.key === 'Enter' || e.key === 'Space') {
@@ -10337,15 +11291,15 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
 
-var _templateObject$1g, _templateObject2$Z, _templateObject3$L, _templateObject4$C, _templateObject5$v;
-var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), exports.Colors.LightGrey);
-var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
-var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), exports.Colors.Black, function (_ref) {
+var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$F, _templateObject5$x;
+var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), exports.Colors.LightGrey);
+var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
+var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), exports.Colors.Black, function (_ref) {
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
 }, exports.Colors.MidGrey);
-var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
+var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
   var isOpen = _ref2.isOpen;
   return isOpen ? 'block' : 'none';
 }, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
@@ -10501,19 +11455,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1h, _templateObject2$_, _templateObject3$M, _templateObject4$D, _templateObject5$w, _templateObject6$n;
-var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
-var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$G, _templateObject5$y, _templateObject6$q;
+var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Sections = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Section = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
   var color = _ref.color;
   return "var(--base-color-" + color + ")";
 });
-var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
-var Text = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
+var Text = /*#__PURE__*/styled__default.div(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
 });
-var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
+var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
   var color = _ref3.color;
   return "var(--base-color-" + color + ")";
 });
@@ -10595,28 +11549,28 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1i, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o, _templateObject7$g, _templateObject8$b, _templateObject9$7, _templateObject10$7;
-var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
-var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
-var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
+var _templateObject$1m, _templateObject2$13, _templateObject3$Q, _templateObject4$H, _templateObject5$z, _templateObject6$r, _templateObject7$j, _templateObject8$e, _templateObject9$9, _templateObject10$9;
+var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
+var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
   return "var(--base-color-" + props.lineColor + ")";
 }, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
-var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n  border-bottom: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
+var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n  border-bottom: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
   return "var(--base-color-" + props.lineColor + ")";
 }, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.mobile);
-var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: none;\n  }\n"])));
-var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
+var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: none;\n  }\n"])));
+var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   return active === 'true' && "\n      color: var(--base-color-core);\n      border-bottom: 1px solid var(--base-color-core);\n    ";
 });
-var Next = /*#__PURE__*/styled__default.span(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
-var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
-var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
+var Next = /*#__PURE__*/styled__default.span(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
+var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
+var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject10$9 || (_templateObject10$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 /* eslint-disable react/no-danger */
 var Content = function Content(_ref) {
@@ -10724,7 +11678,7 @@ var Table = function Table(_ref) {
   } else {
     visibleRows = totalRows;
   }
-  return /*#__PURE__*/React__default.createElement(Wrapper$7, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$8, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickPrev: function onClickPrev() {
       return scrollTable(tableRef, 'left');
     },
@@ -10799,32 +11753,32 @@ var Table = function Table(_ref) {
   }))))))))));
 };
 
-var _templateObject$1j, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$h, _templateObject8$c, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2;
-var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
+var _templateObject$1n, _templateObject2$14, _templateObject3$R, _templateObject4$I, _templateObject5$A, _templateObject6$s, _templateObject7$k, _templateObject8$f, _templateObject9$a, _templateObject10$a, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$4, _templateObject15$3;
+var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return "var(--base-color-" + theme + ")";
 }, function (_ref2) {
   var theme = _ref2.theme;
   return "var(--base-color-" + theme + ")";
 });
-var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
-var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  height: 52px;\n  background: var(--base-color-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    height: 37px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
-var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--base-color-errorstate);\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
-var Form = /*#__PURE__*/styled__default.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error$1);
-var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 28px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), devices.mobile);
-var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--base-color-errorstate);\n"])));
-var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  div {\n    text-decoration: underline;\n  }\n"])));
-var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n\n  @media ", " {\n    width: 100%;\n  }\n  &:focus {\n    outline: 3px solid var(--base-color-lapislazuli);\n  }\n"])), devices.mobile);
-var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject10$8 || (_templateObject10$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 36px;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n"])), devices.mobile);
-var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
-var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject12$3 || (_templateObject12$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  gap: var(--grid-column-gap);\n  cursor: pointer;\n"])));
-var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  transform: rotate(", ");\n  .dropdown-icon > div {\n    border-bottom: none;\n    color: var(--base-color-black);\n    margin: 0;\n  }\n"])), function (_ref3) {
+var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
+var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  height: 52px;\n  background: var(--base-color-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    height: 37px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
+var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--base-color-errorstate);\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
+var Form = /*#__PURE__*/styled__default.form(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error$1);
+var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 28px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), devices.mobile);
+var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--base-color-errorstate);\n"])));
+var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  div {\n    text-decoration: underline;\n  }\n"])));
+var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n\n  @media ", " {\n    width: 100%;\n  }\n  &:focus {\n    outline: 3px solid var(--base-color-lapislazuli);\n  }\n"])), devices.mobile);
+var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject10$a || (_templateObject10$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 36px;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n"])), devices.mobile);
+var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
+var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  gap: var(--grid-column-gap);\n  cursor: pointer;\n"])));
+var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject13$4 || (_templateObject13$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  transform: rotate(", ");\n  .dropdown-icon > div {\n    border-bottom: none;\n    color: var(--base-color-black);\n    margin: 0;\n  }\n"])), function (_ref3) {
   var _ref3$isOpen = _ref3.isOpen,
     isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
   return isOpen ? '180deg' : '0deg';
 });
-var HiddenInstructions = /*#__PURE__*/styled__default.div(_templateObject14$3 || (_templateObject14$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n"])));
-var SignUpHeader = /*#__PURE__*/styled__default(Grid)(_templateObject15$2 || (_templateObject15$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  row-gap: 0;\n"])));
+var HiddenInstructions = /*#__PURE__*/styled__default.div(_templateObject14$4 || (_templateObject14$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n"])));
+var SignUpHeader = /*#__PURE__*/styled__default(Grid)(_templateObject15$3 || (_templateObject15$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  row-gap: 0;\n"])));
 
 var regex = {
   signInEmail:
@@ -11122,7 +12076,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
       });
     }
   }, [isSuccess]);
-  return /*#__PURE__*/React__default.createElement(Wrapper$8, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$9, {
     theme: themeToColor(theme)
   }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
     id: signUpInstructionsId,
@@ -11186,8 +12140,306 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
   }))))));
 };
 
-var _templateObject$1k;
-var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", "; \n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n    \n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n    --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n    --harmonic-text-link-underline-offset: 6px;\n    --harmonic-text-transform-navigation: capitalize;\n    --harmonic-font-size-navigation: 19px;\n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n    }\n\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
+var _BUTTONS_STYLE_VALUES;
+// Text color, Background color, Border color, Hovered color
+var BUTTONS_STYLE_VALUES = (_BUTTONS_STYLE_VALUES = {}, _BUTTONS_STYLE_VALUES[exports.ButtonType.Primary] = [ThemeColor['base-black'], ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES[exports.ButtonType.Secondary] = [ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['base-white'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES[exports.ButtonType.Tertiary] = [ThemeColor['base-white'], ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES);
+var getLinkStyle = function getLinkStyle(link, defaultTextColor, defaultBackgroundColor, defaultBorderColor, defaultHoveredColor, defaultPressedColor) {
+  var _link$textColor, _link$backgroundColor, _link$borderColor, _link$hoveredColor, _link$pressedColor;
+  return {
+    textColor: (_link$textColor = link.textColor) != null ? _link$textColor : defaultTextColor,
+    backgroundColor: (_link$backgroundColor = link.backgroundColor) != null ? _link$backgroundColor : defaultBackgroundColor,
+    borderColor: (_link$borderColor = link.borderColor) != null ? _link$borderColor : defaultBorderColor,
+    hoveredColor: (_link$hoveredColor = link.hoveredColor) != null ? _link$hoveredColor : defaultHoveredColor,
+    pressedColor: (_link$pressedColor = link.pressedColor) != null ? _link$pressedColor : defaultPressedColor
+  };
+};
+var processSlideLinks = function processSlideLinks(links) {
+  return links.flatMap(function (link) {
+    if (!link) return [];
+    var linkStyle = link.buttonType ? getLinkStyle.apply(void 0, [link].concat(BUTTONS_STYLE_VALUES[link.buttonType])) : {};
+    return _extends({}, link, linkStyle);
+  });
+};
+var isVideoSlide = function isVideoSlide(slideMedia) {
+  return slideMedia.video !== undefined;
+};
+
+var VideoSlide = function VideoSlide(_ref) {
+  var index = _ref.index,
+    settings = _ref.settings,
+    isCurrentSlide = _ref.isCurrentSlide;
+  var viewport = useViewport();
+  var videoComponentId = settings.key + "-video-" + index;
+  var videoUrl = viewport.isMobile ? settings.video.mobile : settings.video.desktop;
+  var posterUrl = viewport.isMobile ? settings.poster.mobile : settings.poster.desktop;
+  // eslint-disable-next-line jsx-a11y/media-has-caption
+  var video = /*#__PURE__*/React__default.createElement("video", {
+    id: videoComponentId,
+    src: videoUrl,
+    poster: posterUrl
+  });
+  return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
+    isCurrentSlide: isCurrentSlide
+  }, /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
+    video: video,
+    settings: settings
+  }));
+};
+var SwipeCarousel = function SwipeCarousel(_ref2) {
+  var slidesMedia = _ref2.slidesMedia,
+    currentSlide = _ref2.currentSlide,
+    carouselRef = _ref2.carouselRef,
+    hasMultipleSlides = _ref2.hasMultipleSlides,
+    setCurrentSlide = _ref2.setCurrentSlide;
+  var hasOnlyImageSlides = slidesMedia.every(function (slide) {
+    return !isVideoSlide(slide);
+  });
+  return /*#__PURE__*/React__default.createElement(Swipe, {
+    ref: carouselRef,
+    infinite: hasMultipleSlides && hasOnlyImageSlides,
+    onIndexChange: setCurrentSlide,
+    "aria-roledescription": "carousel"
+  }, slidesMedia.map(function (mediaContent, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "swiper-slide",
+      key: mediaContent.key,
+      "aria-hidden": index !== currentSlide,
+      "aria-roledescription": "slide"
+    }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+      aspectRatio: exports.AspectRatio['4:3']
+    }, isVideoSlide(mediaContent) ? (/*#__PURE__*/React__default.createElement(VideoSlide, {
+      settings: mediaContent,
+      index: index,
+      isCurrentSlide: index === currentSlide
+    })) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
+      alt: mediaContent.alt
+    }, mediaContent)))));
+  }));
+};
+
+var HighlightsCarousel = function HighlightsCarousel(_ref) {
+  var logo = _ref.logo,
+    carouselTitle = _ref.carouselTitle,
+    slides = _ref.slides,
+    titleSemanticLevel = _ref.titleSemanticLevel,
+    className = _ref.className;
+  var slidesMedia = React.useMemo(function () {
+    return slides.map(function (_ref2) {
+      var mediaContent = _ref2.mediaContent;
+      return mediaContent;
+    });
+  }, []);
+  var _useState = React.useState(0),
+    currentSlide = _useState[0],
+    setCurrentSlide = _useState[1];
+  var currentSlideData = slides[currentSlide];
+  var links = currentSlideData.links,
+    auxiliaryCTA = currentSlideData.auxiliaryCTA;
+  var hasMultipleSlides = slidesMedia.length > 1;
+  var hasOnlyImageSlides = slidesMedia.every(function (slide) {
+    return !isVideoSlide(slide);
+  });
+  var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
+  var carouselRef = React.useRef(null);
+  var onNext = function onNext() {
+    var _carouselRef$current;
+    return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
+  };
+  var onPrev = function onPrev() {
+    var _carouselRef$current2;
+    return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
+  };
+  var handleClickInside = function handleClickInside(e) {
+    e.stopPropagation();
+  };
+  return /*#__PURE__*/React__default.createElement(HighlightsGrid, {
+    role: "region",
+    "aria-labelledby": carouselTitleId,
+    onClick: handleClickInside,
+    className: className
+  }, /*#__PURE__*/React__default.createElement(CarouselTitleWrapper, {
+    "data-testid": "carousel-title"
+  }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
+    id: carouselTitleId
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    size: "small",
+    serif: true,
+    hierarchy: "h" + titleSemanticLevel
+  }, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    onClickNext: onNext,
+    onClickPrev: onPrev
+  }))), /*#__PURE__*/React__default.createElement(InfoWrapper, {
+    "data-testid": "info-wrapper"
+  }, /*#__PURE__*/React__default.createElement(InfoSection, {
+    logo: logo,
+    slide: currentSlideData,
+    currentSlideIndex: currentSlide
+  }), /*#__PURE__*/React__default.createElement(Buttons, {
+    links: links,
+    auxiliaryCTA: auxiliaryCTA
+  })), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
+    "data-testid": "carousel-wrapper"
+  }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
+    "data-testid": "rotator-buttons"
+  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    onClickNext: onNext,
+    onClickPrev: onPrev,
+    availablePrev: hasOnlyImageSlides || currentSlide !== 0,
+    availableNext: hasOnlyImageSlides || currentSlide !== slidesMedia.length - 1
+  }))), /*#__PURE__*/React__default.createElement(SwipeCarousel, {
+    slidesMedia: slidesMedia,
+    hasMultipleSlides: hasMultipleSlides,
+    carouselRef: carouselRef,
+    currentSlide: currentSlide,
+    setCurrentSlide: setCurrentSlide
+  })));
+};
+
+var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
+
+var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
+
+var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
+
+var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
+
+/* eslint-disable react/jsx-no-useless-fragment */
+var getThemeClass = function getThemeClass(theme) {
+  // Always include the base (core) theme class
+  var baseThemeClass = coreThemeStyles.coreTheme;
+  var overrideClass = '';
+  switch (theme) {
+    case exports.ThemeType.Core:
+      overrideClass = '';
+      break;
+    case exports.ThemeType.Stream:
+      overrideClass = streamThemeStyles.streamTheme;
+      break;
+    case exports.ThemeType.Cinema:
+      overrideClass = cinemaThemeStyles.cinemaTheme;
+      break;
+    case exports.ThemeType.Schools:
+      overrideClass = schoolsThemeStyles.schoolsTheme;
+      break;
+    default:
+      overrideClass = '';
+  }
+  // Return the combined classes
+  return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
+};
+var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
+  var theme = _ref.theme,
+    children = _ref.children;
+  var themeClass = getThemeClass(theme);
+  // Convert children to an array (assuming they accept a className prop)
+  var childrenArray = React__default.Children.toArray(children);
+  var themedChildren = childrenArray.map(function (child) {
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      className: ((child.props.className || '') + " " + themeClass).trim(),
+      theme: theme
+    });
+  });
+  return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
+};
+
+var _excluded$v = ["logo", "slides"];
+var HighlightsCinema = function HighlightsCinema(_ref) {
+  var logo = _ref.logo,
+    slides = _ref.slides,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+  var slidesWithLinks = slides.map(function (slide) {
+    var links = processSlideLinks(slide.links);
+    return _extends({}, slide, {
+      links: links
+    });
+  });
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
+    theme: exports.ThemeType.Cinema
+  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
+    slides: slidesWithLinks,
+    logo: logo ? /*#__PURE__*/React__default.createElement(CinemaBadge, {
+      align: "left"
+    }) : null
+  })));
+};
+
+var _excluded$w = ["slides"];
+var HighlightsCore = function HighlightsCore(_ref) {
+  var slides = _ref.slides,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+  var slidesWithLinks = slides.map(function (slide) {
+    var links = processSlideLinks(slide.links);
+    return _extends({}, slide, {
+      links: links
+    });
+  });
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
+    theme: exports.ThemeType.Core
+  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
+    slides: slidesWithLinks
+  })));
+};
+
+var _excluded$x = ["logo", "slides"];
+var HighlightsStream = function HighlightsStream(_ref) {
+  var logo = _ref.logo,
+    slides = _ref.slides,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+  var slidesWithLinks = slides.map(function (slide) {
+    var links = processSlideLinks(slide.links);
+    return _extends({}, slide, {
+      links: links
+    });
+  });
+  return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
+    theme: exports.ThemeType.Stream
+  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
+    slides: slidesWithLinks,
+    logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, {
+      align: "left"
+    }) : null
+  })));
+};
+
+var _templateObject$1o, _templateObject3$S;
+var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  .swipe-slide {\n    width: 100%;\n  }\n"])));
+var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
+
+var MinimalCarousel = function MinimalCarousel(_ref) {
+  var children = _ref.children;
+  var carouselRef = React.useRef(null);
+  var hasMultipleChildren = React__default.Children.count(children) > 1;
+  var onNext = function onNext() {
+    var _carouselRef$current;
+    return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
+  };
+  var onPrev = function onPrev() {
+    var _carouselRef$current2;
+    return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
+  };
+  return /*#__PURE__*/React__default.createElement(CarouselWrapper$1, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 1,
+    columnSpanDesktop: 16,
+    columnStartDevice: 1,
+    columnSpanDevice: 14
+  }, /*#__PURE__*/React__default.createElement(Swipe, {
+    ref: carouselRef,
+    infinite: hasMultipleChildren,
+    "data-testid": "carousel-swipe"
+  }, React__default.Children.toArray(children).map(function (child, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: "swipe-minimal-carousel-slide-" + index
+    }, child);
+  })))), hasMultipleChildren && (/*#__PURE__*/React__default.createElement(ButtonsWrapper$1, {
+    "data-testid": "carousel-buttons-wrapper"
+  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    onClickNext: onNext,
+    onClickPrev: onPrev
+  }))));
+};
+
+var _templateObject$1p;
+var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", "; \n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n    \n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n    --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n    --harmonic-text-link-underline-offset: 6px;\n    --harmonic-text-transform-navigation: capitalize;\n    --harmonic-font-size-navigation: 19px;\n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n    }\n\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
@@ -12134,50 +13386,11 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1k || (
   return theme.footer.tablet.paddingBottom;
 }, devices.desktop, devices.largeDesktop);
 
-var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
-
-var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
-
-var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
-
-var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
-
-/* eslint-disable react/jsx-no-useless-fragment */
-var getThemeClass = function getThemeClass(theme) {
-  // Always include the base (core) theme class
-  var baseThemeClass = coreThemeStyles.coreTheme;
-  var overrideClass = '';
-  switch (theme) {
-    case exports.ThemeType.Core:
-      overrideClass = '';
-      break;
-    case exports.ThemeType.Stream:
-      overrideClass = streamThemeStyles.streamTheme;
-      break;
-    case exports.ThemeType.Cinema:
-      overrideClass = cinemaThemeStyles.cinemaTheme;
-      break;
-    case exports.ThemeType.Schools:
-      overrideClass = schoolsThemeStyles.schoolsTheme;
-      break;
-    default:
-      overrideClass = '';
-  }
-  // Return the combined classes
-  return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
-};
-var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
-  var theme = _ref.theme,
-    children = _ref.children;
-  var themeClass = getThemeClass(theme);
-  // Convert children to an array (assuming they accept a className prop)
-  var childrenArray = React__default.Children.toArray(children);
-  var themedChildren = childrenArray.map(function (child) {
-    return /*#__PURE__*/React__default.cloneElement(child, {
-      className: ((child.props.className || '') + " " + themeClass).trim()
-    });
-  });
-  return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
+/* ~~~~~~~ new harmonic types ~~~~~~~ */
+var HarmonicSizes = {
+  Small: 'small',
+  Medium: 'medium',
+  Large: 'large'
 };
 
 exports.Accordion = Accordion;
@@ -12190,6 +13403,7 @@ exports.AuxiliaryNav = AuxiliaryNav;
 exports.BodyText = BodyText;
 exports.Card = Card;
 exports.Cards = Cards;
+exports.Carousel = Carousel;
 exports.CinemaBadge = CinemaBadge;
 exports.ContactCard = ContactCard;
 exports.ContentSummary = ContentSummary;
@@ -12200,13 +13414,19 @@ exports.Footer = Footer;
 exports.GlobalStyles = GlobalStyles;
 exports.Grid = Grid;
 exports.GridItem = GridItem;
+exports.HarmonicSizes = HarmonicSizes;
 exports.HarmonicThemeProvider = HarmonicThemeProvider;
 exports.Header = Header;
+exports.HighlightsCarousel = HighlightsCarousel;
+exports.HighlightsCarouselCinema = HighlightsCinema;
+exports.HighlightsCarouselCore = HighlightsCore;
+exports.HighlightsCarouselStream = HighlightsStream;
 exports.Icon = Icon;
 exports.ImageAspectRatioWrapper = ImageAspectRatioWrapper;
 exports.ImageWithCaption = ImageWithCaption;
 exports.Information = Information;
 exports.MiniCard = MiniCard;
+exports.MinimalCarousel = MinimalCarousel;
 exports.ModalWindow = ModalWindow;
 exports.Navigation = Navigation;
 exports.Overline = Overline;
@@ -12215,6 +13435,7 @@ exports.PageHeadingCompact = PageHeadingCompact;
 exports.PageHeadingCore = PageHeadingCore;
 exports.PageHeadingImpact = PageHeadingImpact;
 exports.PageHeadingPanel = PageHeadingPanel;
+exports.PageHeadingPromo = PageHeadingPromo;
 exports.PageHeadingStream = PageHeadingStream;
 exports.Pagination = Pagination;
 exports.PasswordStrength = PasswordStrength;
@@ -12255,6 +13476,7 @@ exports.TextField = TextField;
 exports.TextFieldLegacy = TextFieldLegacy;
 exports.TextLink = TextLink;
 exports.TextOnly = TextOnly;
+exports.ThemeColor = ThemeColor;
 exports.ThemeProvider = Theme;
 exports.Tickbox = Tickbox;
 exports.Tickbox2 = Tickbox2;