@royaloperahouse/chord 1.18.2 → 1.19.0-a-chord-development

package/dist/chord.cjs.development.js

@@ -2240,7 +2240,7 @@ var _templateObject$6;
 var Grid = /*#__PURE__*/styled__default.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
 
 var _templateObject$7;
-var GridItem = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", " / span\n    ", ";\n\n  @media ", " {\n    & {\n      grid-column: ", " / span\n        ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: ", " / span\n        ", ";\n    }\n  }\n"])), function (_ref) {
+var GridItem = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", " / span\n    ", ";\n\n  @media ", " {\n    & {\n      grid-column: ", " /\n        span ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: ", " / span\n        ", ";\n    }\n  }\n"])), function (_ref) {
   var columnStartDesktop = _ref.columnStartDesktop;
   return columnStartDesktop;
 }, function (_ref2) {
@@ -2248,12 +2248,14 @@ var GridItem = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateO
       columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
   return columnSpanDesktop;
 }, devices.mobile, function (_ref3) {
-  var columnStartDevice = _ref3.columnStartDevice;
-  return columnStartDevice;
+  var columnStartDevice = _ref3.columnStartDevice,
+      columnStartSmallDevice = _ref3.columnStartSmallDevice;
+  return columnStartSmallDevice != null ? columnStartSmallDevice : columnStartDevice;
 }, function (_ref4) {
   var _ref4$columnSpanDevic = _ref4.columnSpanDevice,
-      columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic;
-  return columnSpanDevice;
+      columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic,
+      columnSpanSmallDevice = _ref4.columnSpanSmallDevice;
+  return columnSpanSmallDevice != null ? columnSpanSmallDevice : columnSpanDevice;
 }, devices.tablet, function (_ref5) {
   var columnStartDevice = _ref5.columnStartDevice;
   return columnStartDevice;
@@ -3192,17 +3194,21 @@ var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject2$9 || (
   return dark ? 'white' : 'black';
 }, devices.mobile);
 var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  &:checked ~ ", " {\n    background-color: var(--base-color-", ");\n    & svg {\n      display: block;\n      path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), TickboxCheckmark, function (_ref3) {
-  var dark = _ref3.dark;
-  return dark ? 'white' : 'black';
+  var dark = _ref3.dark,
+      whiteBox = _ref3.whiteBox;
+  return dark || whiteBox ? 'white' : 'black';
 }, function (_ref4) {
-  var dark = _ref4.dark;
-  return dark ? 'black' : 'white';
+  var dark = _ref4.dark,
+      whiteBox = _ref4.whiteBox;
+  return dark || whiteBox ? 'black' : 'white';
 });
 
 var Tickbox = function Tickbox(_ref) {
   var children = _ref.children,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? 'light' : _ref$mode,
+      _ref$whiteBox = _ref.whiteBox,
+      whiteBox = _ref$whiteBox === void 0 ? false : _ref$whiteBox,
       onChange = _ref.onChange,
       _ref$checked = _ref.checked,
       checked = _ref$checked === void 0 ? false : _ref$checked,
@@ -3243,7 +3249,8 @@ var Tickbox = function Tickbox(_ref) {
     checked: selected,
     onChange: onInputChange,
     dark: isDarkMode,
-    "aria-labelledby": dataLabel
+    "aria-labelledby": dataLabel,
+    whiteBox: whiteBox
   }), /*#__PURE__*/React__default.createElement(TickboxCheckmark, {
     dark: isDarkMode
   }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -3502,7 +3509,7 @@ var VolumeControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1
 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;
+    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) {
@@ -3518,7 +3525,7 @@ var useIOS = function useIOS() {
       setIOS = _useState[1];
 
   React.useEffect(function () {
-    if (typeof navigator === undefined) return;
+    if (typeof navigator === 'undefined') return;
     setIOS(isIOS());
   }, []);
   return IOS;
@@ -3677,12 +3684,12 @@ var _templateObject$t;
 var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 16px;\n  justify-content: flex-end;\n  height: 26px;\n\n  @media ", " {\n    column-gap: 8px;\n  }\n"])), devices.mobile);
 
 var _templateObject$u, _templateObject2$f, _templateObject3$9, _templateObject4$5;
-var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid var(--base-color-transparent);\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
+var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid var(--base-color-transparent);\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n\n  ", "\n"])), function (_ref) {
   var selected = _ref.selected,
       colorPrimary = _ref.colorPrimary;
 
   if (selected) {
-    return "\n        border-bottom: 1px solid var(--base-color-" + colorPrimary + ");\n        && a {\n          color: var(--base-color-" + colorPrimary + ");\n        }       \n        && svg path {\n          fill: var(--base-color-" + colorPrimary + ");\n        }\n      ";
+    return "\n        border-bottom: 1px solid var(--base-color-" + colorPrimary + ");\n        && a {\n          color: var(--base-color-" + colorPrimary + ");\n        }\n        && svg path {\n          fill: var(--base-color-" + colorPrimary + ");\n        }\n      ";
   }
 
   return '';
@@ -3695,18 +3702,136 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$u || (_te
 }, function (_ref4) {
   var colorPrimary = _ref4.colorPrimary;
   return colorPrimary;
+}, function (_ref5) {
+  var isActive = _ref5.isActive,
+      colorPrimary = _ref5.colorPrimary;
+
+  if (isActive) {
+    return "\n        && a {\n          color: var(--base-color-" + colorPrimary + ");\n        }\n        && svg path {\n          fill: var(--base-color-" + colorPrimary + ");\n        }\n      ";
+  }
+
+  return '';
 });
 var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$f || (_templateObject2$f = /*#__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$9 || (_templateObject3$9 = /*#__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\n  & .basket-num {\n    color: white;\n    font-size: 10px;\n    font-family: var(--font-family-navigation);\n  }\n"])));
-var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  color: var(--base-color-black);\n  margin-left: 6px;\n  text-decoration: none;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  color: var(--base-color-black);\n  margin-left: 6px;\n  text-decoration: none;\n"])));
+
+var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
+  if (!expiryUnixTimestamp) return 0;
+  var now = Date.now();
+  var expiry = new Date(expiryUnixTimestamp * 1000);
+  var diff = Math.round((expiry.getTime() - now) / 1000);
+  return diff > 0 ? diff : 0;
+};
+var formatTime = function formatTime(seconds) {
+  if (seconds > 60) {
+    return Math.ceil(seconds / 60) + " mins";
+  }
+
+  return seconds + " sec" + (seconds === 1 ? '' : 's');
+};
+var checkTimeRed = function checkTimeRed(seconds) {
+  if (seconds <= 0) {
+    return false;
+  }
+
+  return seconds / 60 <= 5;
+};
+
+var useBasket = function useBasket(expiryUnixTimestamp, numItems, numVirtualItems) {
+  if (numItems === void 0) {
+    numItems = 0;
+  }
+
+  if (numVirtualItems === void 0) {
+    numVirtualItems = 0;
+  }
+
+  var _useState = React.useState(),
+      basketText = _useState[0],
+      setBasketText = _useState[1];
+
+  var _useState2 = React.useState(),
+      basketIsActive = _useState2[0],
+      setBasketIsActive = _useState2[1];
+
+  var _useState3 = React.useState(0),
+      basketTotalNumItems = _useState3[0],
+      setBasketTotalNumItems = _useState3[1];
+
+  var _useState4 = React.useState(getSecondsUntil(expiryUnixTimestamp)),
+      seconds = _useState4[0],
+      setSeconds = _useState4[1];
+
+  var _useState5 = React.useState(),
+      timer = _useState5[0],
+      setTimer = _useState5[1];
+
+  var _useState6 = React.useState(true),
+      basketIsEmpty = _useState6[0],
+      setBasketIsEmpty = _useState6[1];
+
+  React.useEffect(function () {
+    if (numItems > 0 || numVirtualItems > 0) {
+      setBasketIsEmpty(false);
+    } else {
+      setBasketIsEmpty(true);
+    }
+
+    setBasketTotalNumItems(numItems + numVirtualItems);
+  }, [numItems, numVirtualItems]);
+  React.useEffect(function () {
+    if (!expiryUnixTimestamp) return;
+    setSeconds(getSecondsUntil(expiryUnixTimestamp));
+  }, [expiryUnixTimestamp]);
+  React.useEffect(function () {
+    if (timer) {
+      clearInterval(timer); // clears the old timer before setting a new one
+    }
+
+    if (!expiryUnixTimestamp || numItems === 0) return function () {
+      return undefined;
+    };
+    var interval = setInterval(function () {
+      setSeconds(getSecondsUntil(expiryUnixTimestamp));
+    }, 1000);
+    setTimer(interval);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [expiryUnixTimestamp]);
+  React.useEffect(function () {
+    if (!timer) return;
+
+    if (seconds > 0) {
+      setBasketText(formatTime(seconds));
+      setBasketIsActive(checkTimeRed(seconds));
+    } else {
+      clearInterval(timer);
+      setBasketTotalNumItems(numVirtualItems);
+      setBasketText('');
+      setBasketIsActive(false);
+      setBasketIsEmpty(true);
+    }
+  }, [seconds, timer]);
+  return {
+    basketText: basketText,
+    basketTotalNumItems: basketTotalNumItems,
+    basketIsActive: basketIsActive,
+    basketIsEmpty: basketIsEmpty
+  };
+};
 
 var Basket$1 = function Basket(_ref) {
   var text = _ref.text,
+      expiryTime = _ref.expiryTime,
       link = _ref.link,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected,
       _ref$numItems = _ref.numItems,
       numItems = _ref$numItems === void 0 ? 0 : _ref$numItems,
+      _ref$numVirtualItems = _ref.numVirtualItems,
+      numVirtualItems = _ref$numVirtualItems === void 0 ? 0 : _ref$numVirtualItems,
       onClick = _ref.onClick,
       _ref$colorPrimary = _ref.colorPrimary,
       colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary;
@@ -3717,28 +3842,34 @@ var Basket$1 = function Basket(_ref) {
     }
   };
 
+  var _useBasket = useBasket(expiryTime, numItems, numVirtualItems),
+      basketText = _useBasket.basketText,
+      basketTotalNumItems = _useBasket.basketTotalNumItems,
+      basketIsActive = _useBasket.basketIsActive,
+      basketIsEmpty = _useBasket.basketIsEmpty;
+
   var onKeyDownHandler = function onKeyDownHandler(e) {
     if (e.key === 'Enter') {
       onClickHandler();
     }
   };
 
-  var empty = numItems <= 0;
   return /*#__PURE__*/React__default.createElement(BasketContainer, {
     selected: selected,
     onClick: onClickHandler,
     onKeyDown: onKeyDownHandler,
     colorPrimary: colorPrimary,
+    isActive: basketIsActive,
     tabIndex: 0
-  }, /*#__PURE__*/React__default.createElement(SvgContainer, null, empty ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(SvgContainer, null, basketIsEmpty ? /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Basket"
   }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "BasketFull"
   }), /*#__PURE__*/React__default.createElement(NumContainer, null, /*#__PURE__*/React__default.createElement("span", {
     className: "basket-num"
-  }, numItems)))), /*#__PURE__*/React__default.createElement("div", null, !empty ? /*#__PURE__*/React__default.createElement(BasketText, {
+  }, basketTotalNumItems)))), /*#__PURE__*/React__default.createElement("div", null, !basketIsEmpty ? /*#__PURE__*/React__default.createElement(BasketText, {
     "data-testid": "baskettext"
-  }, text) : ''));
+  }, expiryTime ? basketText : text) : ''));
 };
 
 var _templateObject$v, _templateObject2$g;
@@ -4002,8 +4133,10 @@ var NavTop = function NavTop(_ref) {
       accountOptions = _ref.accountOptions,
       onLink = _ref.onLink,
       basketText = _ref.basketText,
+      basketExpiryUnixTimestamp = _ref.basketExpiryUnixTimestamp,
       basketLink = _ref.basketLink,
       basketNumItems = _ref.basketNumItems,
+      basketNumVirtualItems = _ref.basketNumVirtualItems,
       onClickSearch = _ref.onClickSearch,
       _ref$isShowSearch = _ref.isShowSearch,
       isShowSearch = _ref$isShowSearch === void 0 ? false : _ref$isShowSearch,
@@ -4016,7 +4149,9 @@ var NavTop = function NavTop(_ref) {
   }), /*#__PURE__*/React__default.createElement(Basket$1, {
     link: basketLink,
     text: basketText,
+    expiryTime: basketExpiryUnixTimestamp,
     numItems: basketNumItems,
+    numVirtualItems: basketNumVirtualItems,
     onClick: onLink,
     colorPrimary: colorPrimary
   }), /*#__PURE__*/React__default.createElement(Account, {
@@ -4372,8 +4507,10 @@ var Navigation = function Navigation(_ref) {
     accountText: navTopData.accountText,
     accountLink: navTopData.accountLink,
     basketText: navTopData.basketText,
+    basketExpiryUnixTimestamp: navTopData.basketExpiryUnixTimestamp,
     basketLink: navTopData.basketLink,
     basketNumItems: navTopData.basketNumItems,
+    basketNumVirtualItems: navTopData.basketNumVirtualItems,
     onClickSearch: onClickSearchHandler,
     onLink: onLinkHandler,
     isShowSearch: showSearch,
@@ -5180,7 +5317,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     }
   })), additionalInfo && /*#__PURE__*/React__default.createElement(AdditionalInfoWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 5
-  }, additionalInfo))), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponentWrapper, null, /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), firstButtonText)), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), secondButtonText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
+  }, additionalInfo))), /*#__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))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
     "data-testid": "carousel-wrapper"
   }, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
     "data-testid": "rotator-buttons"
@@ -5345,88 +5482,93 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
   }, message)));
 };
 
-var SCRIPT_SRC = 'https://talkdeskchatsdk.talkdeskapp.com/talkdeskchatsdk.js?t=';
-var DATA_BIND = '5ea4b1ad-1a17-11ec-af32-06f09e0065e0';
-var DATA_ORG = '';
-var DIV_ID = 'tdWebchat';
-var THEME_ICON = 'https://static.roh.org.uk/logos/crest.svg';
-var THEME_FONT_BODY = fontFamilies.sansSerifFallback;
-var THEME_COLOR = core.colors.core;
-var THEME_COLOR_LIGHT = core.colors.core + '80';
-var THEME_COLOR_BLACK = core.colors.black;
-var THEME_COLOR_LIGHTGREY = core.colors.lightgrey;
-var THEME_COLOR_WHITE = core.colors.white;
-var THEME_COLOR_MIDGREY = core.colors.midgrey;
-var SCRIPT_CONTENT = "var webchat;\n((window, document, node, props, configs) => {\n  if (window.TalkdeskChatSDK) {\n    console.error(\"TalkdeskChatSDK already included\");\n    return;\n  }\n  var divContainer = document.createElement(\"div\");\n  divContainer.id = node;\n  document.body.appendChild(divContainer);\n  var currentDate = new Date().getTime();\n  var src = \"" + SCRIPT_SRC + "\" + currentDate;\n  var script = document.createElement(\"script\");\n  var firstScriptTag = document.getElementsByTagName(\"script\")[0];\n  script.type = \"text/javascript\";\n  script.charset = \"UTF-8\";\n  script.id = \"tdwebchatscript\";\n  script.src = src;\n  script.async = true;\n  firstScriptTag.parentNode.insertBefore(script, firstScriptTag);\n  script.onload = () => {\n    webchat = TalkdeskChatSDK(node, props);\n    webchat.init(configs);\n  };\n})(\n  window,\n  document,\n  \"" + DIV_ID + "\",\n  { flowId: \"cd19d348b5fb4a0ab0d3277686f28d1e\", accountId: \"\", region: \"td-us-1\" },\n  { enableEmoji: true, enableUserInput: true, styles :{\n    \"botIcon\": \"" + THEME_ICON + "\",\n    \"botBackgroundColor\":\"" + THEME_COLOR_LIGHTGREY + "\",\n    \"botTextColor\": \"" + THEME_COLOR_BLACK + "\",\n    \"chatTitle\": \"Royal Opera House\",\n    \"chatThemeColor\": \"" + THEME_COLOR + "\",\n    \"chatTitleIcon\": \"" + THEME_ICON + "\",\n    \"customButtonBackgroundColor\": \"" + THEME_COLOR + "\",\n    \"customButtonBorderColor\": \"" + THEME_COLOR + "\",\n    \"customButtonColor\": \"" + THEME_COLOR_WHITE + "\",\n    \"userBackgroundColor\":\"" + THEME_COLOR_LIGHTGREY + "\",\n    \"userTextColor\": \"" + THEME_COLOR_BLACK + "\",\n    \"userBackgroundColor\":\"" + THEME_COLOR_MIDGREY + "\",\n    \"userTextColor\": \"" + THEME_COLOR_BLACK + "\",\n    \"welcomeMessageBackgroundColor\": \"" + THEME_COLOR_LIGHT + "\",\n    \"welcomeMessageContentFontSize\": \"18px\",\n    \"welcomeMessageTitleFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"welcomeMessageContentFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customMessageFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customMessageNoBubbleFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customButtonFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customFieldLabelFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customFieldInputFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customDropdownLabelFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customDropdownInputFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"startChatButtonBackgroundColor\": \"" + THEME_COLOR + "\",\n    \"startChatButtonBorderColor\": \"" + THEME_COLOR + "\",\n    \"startChatButtonTextColor\": \"" + THEME_COLOR_WHITE + "\",\n    \"startChatButtonHoverBackgroundColor\": \"" + THEME_COLOR + "\",\n    \"startChatButtonHoverBorderColor\": \"" + THEME_COLOR + "\",\n    \"startChatButtonHoverTextColor\": \"" + THEME_COLOR_WHITE + "\",\n    \"startChatButtonFontFamily\": \"" + THEME_FONT_BODY + "\",\n  }}\n);";
-
-var loadLiveChatScript = function loadLiveChatScript(callback) {
-  var existingScript = document.getElementById(DIV_ID);
+var _templateObject$F, _templateObject2$q, _templateObject3$j, _templateObject4$d, _templateObject5$a;
+var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #f0f0f0;\n  padding: 40px;\n\n  @media ", " {\n    & {\n      /* width: 100vw; */\n    }\n  }\n"])), devices.mobile);
+var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n"])));
+var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
+var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
+var PriceRow = /*#__PURE__*/styled__default.h4(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  gap: 12px;\n  font-weight: 400;\n  font-family: ", ";\n  font-feature-settings: 'pnum' on, 'onum' on;\n  font-size: 32px;\n  line-height: 34px;\n  padding: 5px 0 8px 0;\n"])), fontFamilies.adobeGaramondPro);
 
-  if (!existingScript) {
-    var liveChatDiv = document.createElement('div');
-    liveChatDiv.id = DIV_ID;
-    liveChatDiv.setAttribute('data-bind', DATA_BIND);
-    liveChatDiv.setAttribute('data-org', DATA_ORG);
-    var script = document.createElement('script');
-    var scriptBody = document.createTextNode(SCRIPT_CONTENT);
-    script.appendChild(scriptBody);
-    document.body.appendChild(liveChatDiv);
-    document.body.appendChild(script);
+var OfferText = function OfferText(_ref) {
+  var title = _ref.title,
+      description = _ref.description;
+  return /*#__PURE__*/React__default.createElement(OfferTextWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
+    semanticLevel: 2,
+    level: 2
+  }, title), /*#__PURE__*/React__default.createElement(BodyText, {
+    level: 1
+  }, /*#__PURE__*/React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: description != null ? description : ''
+    }
+  })));
+};
 
-    script.onload = function () {
-      if (callback) callback();
-    };
-  }
+var LENGTH_SMALL_TEXT = 19;
+var OFFER_TEXTS_LIMIT = 3;
 
-  if (existingScript && callback) callback();
+var formatPrice = function formatPrice(value) {
+  if (Number.isNaN(Number(value))) return value != null ? value : '';
+  return "\xA3" + Number(value).toFixed(2);
 };
 
-var LiveChat = function LiveChat() {
-  // eslint-disable-next-line
-  var _React$useState = React.useState(false),
-      loaded = _React$useState[0],
-      setLoaded = _React$useState[1];
+var UpsellCard = function UpsellCard(_ref) {
+  var _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      subTitle = _ref.subTitle,
+      price = _ref.price,
+      offerTexts = _ref.offerTexts,
+      link = _ref.link;
 
-  React.useEffect(function () {
-    loadLiveChatScript(function () {
-      setLoaded(true);
+  var truncate = function truncate(str, n) {
+    return str.length >= n ? str.slice(0, n) : str;
+  };
+
+  var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
+  return /*#__PURE__*/React__default.createElement(Wrapper$2, null, /*#__PURE__*/React__default.createElement(TitleContainer$1, null, /*#__PURE__*/React__default.createElement(Subtitle, {
+    semanticLevel: 1,
+    level: 1
+  }, title), subTitle && /*#__PURE__*/React__default.createElement(Overline, {
+    semanticLevel: 2,
+    level: 2
+  }, subTitle), /*#__PURE__*/React__default.createElement(PriceRow, null, formatPrice(price))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText) {
+    return /*#__PURE__*/React__default.createElement(OfferText, {
+      title: offerText.title,
+      description: offerText.description
     });
-  });
-  return /*#__PURE__*/React.createElement("span", {
-    "data-loaded": loaded
-  });
+  }), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT))));
 };
 
-var _templateObject$F, _templateObject2$q;
-var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--base-color-white);\n"])), zIndexes.anchor);
-var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 2px solid var(--base-color-lightgrey);\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), devices.mobileAndTablet, devices.mobile);
+var _templateObject$G;
+var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 60px 75px;\n  grid-template-columns: repeat(2, 1fr);\n  width: 100%;\n\n  @media ", " {\n    width: 100%;\n    padding-left: 0px;\n    padding-right: 0px;\n    grid-template-columns: 1fr;\n  }\n"])), devices.mobile);
 
-var StickyBar = function StickyBar(_ref) {
-  var _ref$columnStartDeskt = _ref.columnStartDesktop,
-      columnStartDesktop = _ref$columnStartDeskt === void 0 ? 3 : _ref$columnStartDeskt,
-      _ref$columnSpanDeskto = _ref.columnSpanDesktop,
-      columnSpanDesktop = _ref$columnSpanDeskto === void 0 ? 8 : _ref$columnSpanDeskto,
-      _ref$columnStartDevic = _ref.columnStartDevice,
-      columnStartDevice = _ref$columnStartDevic === void 0 ? 2 : _ref$columnStartDevic,
-      _ref$columnSpanDevice = _ref.columnSpanDevice,
-      columnSpanDevice = _ref$columnSpanDevice === void 0 ? 12 : _ref$columnSpanDevice,
-      children = _ref.children;
-  return /*#__PURE__*/React__default.createElement(StickyBarWrapper, {
-    "data-testid": "sticky-bar-block"
-  }, /*#__PURE__*/React__default.createElement(StickyBarGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: columnStartDesktop,
-    columnSpanDesktop: columnSpanDesktop,
-    columnStartDevice: columnStartDevice,
-    columnSpanDevice: columnSpanDevice
-  }, children)));
+var UpsellCards = function UpsellCards(_ref) {
+  var upsellCards = _ref.upsellCards;
+  return /*#__PURE__*/React__default.createElement(Wrapper$3, null, upsellCards == null ? void 0 : upsellCards.map(function (card) {
+    return /*#__PURE__*/React__default.createElement(UpsellCard, {
+      title: card.title,
+      subTitle: card.subTitle,
+      price: card.price,
+      offerTexts: card.offerTexts,
+      link: card.link
+    });
+  }));
 };
 
-var _templateObject$G, _templateObject2$r, _templateObject3$j, _templateObject4$d, _templateObject5$a;
-var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
-var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
-var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n"])), devices.mobile);
-var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && a {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-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    margin: 28px 20px;\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$a || (_templateObject5$a = /*#__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\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"])));
+var _templateObject$H, _templateObject2$r, _templateObject3$k;
+var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: solid 4px;\n  border-color: ", ";\n  padding: 4em;\n  @media ", " {\n    & {\n      border-left: none;\n      border-right: none;\n      padding-left: 0;\n      padding-right: 0;\n      padding-top: 2.5em;\n    }\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.primary;
+}, devices.mobile);
+var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  margin-left: 1.5em;\n  margin-right: 1.5em;\n"])));
+var TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 3em;\n  margin-left: 1.5em;\n  margin-right: 1.5em;\n  div > :first-child {\n    margin-top: 1.5em;\n  }\n\n  @media ", " {\n    & {\n      div > :first-child {\n        margin-top: 1em;\n      }\n    }\n  }\n"])), devices.mobile);
+
+var _templateObject$I, _templateObject2$s, _templateObject3$l, _templateObject4$e, _templateObject5$b;
+var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
+var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
+var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n"])), devices.mobile);
+var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && a {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-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    margin: 28px 20px;\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$b || (_templateObject5$b = /*#__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\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"])));
 
 var Accordion = function Accordion(_ref) {
   var _ref$title = _ref.title,
@@ -5488,7 +5630,7 @@ var Accordion = function Accordion(_ref) {
     return visibleStandfirst ? /*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, visibleStandfirst)) : null;
   };
 
-  return /*#__PURE__*/React__default.createElement(AccordionContainer, null, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$1, {
+  return /*#__PURE__*/React__default.createElement(AccordionContainer, null, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
     onClick: toggleAccordion,
     onKeyDown: keyDown,
     tabIndex: 0
@@ -5507,8 +5649,8 @@ var Accordion = function Accordion(_ref) {
   }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
 };
 
-var _templateObject$H;
-var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$J;
+var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 
 var Accordions = function Accordions(_ref) {
   var _ref$items = _ref.items,
@@ -5528,13 +5670,13 @@ var Accordions = function Accordions(_ref) {
   }));
 };
 
-var _templateObject$I, _templateObject2$s, _templateObject3$k;
-var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 28px 0;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  @media ", " {\n    padding: 20px 0;\n  }\n"])), function (_ref) {
+var _templateObject$K, _templateObject2$t, _templateObject3$m;
+var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 28px 0;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  @media ", " {\n    padding: 20px 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, devices.mobile);
-var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  @media ", " {\n    align-items: flex-start;\n  }\n"])), devices.mobile);
-var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__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  color: var(--base-color-white);\n  a {\n    color: var(--base-color-white);\n    text-decoration: underline;\n  }\n"])));
+var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  @media ", " {\n    align-items: flex-start;\n  }\n"])), devices.mobile);
+var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__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  color: var(--base-color-white);\n  a {\n    color: var(--base-color-white);\n    text-decoration: underline;\n  }\n"])));
 
 var AnnouncementBanner = function AnnouncementBanner(_ref) {
   var title = _ref.title,
@@ -5571,31 +5713,31 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
   }))))));
 };
 
-var _templateObject$J, _templateObject2$t, _templateObject3$l, _templateObject4$e, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$1;
+var _templateObject$L, _templateObject2$u, _templateObject3$n, _templateObject4$f, _templateObject5$c, _templateObject6$9, _templateObject7$7, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$1;
 var LENGTH_LARGE_TEXT = 28;
-var LENGTH_SMALL_TEXT = 19;
+var LENGTH_SMALL_TEXT$1 = 19;
 var LENGTH_TEXT_TABLET = 10;
-var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\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$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
   var onlyShowButtonsOnHover = _ref.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$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref2) {
+var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref2) {
   var lineColor = _ref2.lineColor,
       theme = _ref2.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$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
-var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__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 (_ref3) {
+var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
+var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__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 (_ref3) {
   var fullWidth = _ref3.fullWidth;
   return fullWidth ? '0' : '20px';
 }, function (_ref4) {
   var fullWidth = _ref4.fullWidth;
   return fullWidth ? '0' : '20px';
 });
-var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__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 TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$c || (_templateObject5$c = /*#__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$9 || (_templateObject6$9 = /*#__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 = /*#__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 TextContainer$1 = /*#__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 SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$5 || (_templateObject8$5 = /*#__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(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref5) {
   var isVisible = _ref5.isVisible;
@@ -5625,7 +5767,7 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject12$1 ||
   var size = _ref10.size,
       primaryButtonTextLength = _ref10.primaryButtonTextLength,
       tertiaryButtonTextLength = _ref10.tertiaryButtonTextLength;
-  var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
+  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      ";
@@ -5655,7 +5797,7 @@ var _excluded$e = ["text"],
 
 var _buttonTypeToButton;
 var LENGTH_LARGE_TEXT$1 = 28;
-var LENGTH_SMALL_TEXT$1 = 19;
+var LENGTH_SMALL_TEXT$2 = 19;
 var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[exports.ButtonType.Tertiary] = Button$1, _buttonTypeToButton);
 
 var Card = function Card(_ref) {
@@ -5705,7 +5847,7 @@ var Card = function Card(_ref) {
       firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
       restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
 
-  var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$1) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
+  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 || {},
@@ -5713,7 +5855,7 @@ var Card = function Card(_ref) {
       secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
       restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
 
-  var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$1) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
+  var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
 
   var hoverHandler = function hoverHandler(value) {
     if (value) {
@@ -5738,6 +5880,13 @@ var Card = function Card(_ref) {
     },
     onlyShowButtonsOnHover: onlyShowButtonsOnHover,
     "data-testid": "cardcontainer"
+  }, /*#__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
+    }
   }, /*#__PURE__*/React__default.createElement(LabelContainer, {
     isGridCard: isGridCard,
     isVisible: !!labelParams
@@ -5749,14 +5898,7 @@ var Card = function Card(_ref) {
     iconName: labelParams.iconName,
     direction: labelParams.iconDirection,
     color: (_labelParams$color = labelParams.color) != null ? _labelParams$color : exports.Colors.White
-  })))), ' ', /*#__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
-    }
-  }, hovered && /*#__PURE__*/React__default.createElement(HoverContainer, {
+  })))), ' ', hovered && /*#__PURE__*/React__default.createElement(HoverContainer, {
     lineColor: hoverLineColor,
     "data-testid": "hovercontainer"
   }), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
@@ -5771,11 +5913,11 @@ var Card = function Card(_ref) {
     fullWidth: fullWidth
   }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
     list: tags
-  }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement(Header, {
+  }) : 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, {
+  }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer$1, {
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
@@ -5790,9 +5932,9 @@ var Card = function Card(_ref) {
   }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
 };
 
-var _templateObject$K, _templateObject2$u;
-var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$K || (_templateObject$K = /*#__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$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
+var _templateObject$M, _templateObject2$v;
+var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$M || (_templateObject$M = /*#__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$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
 
 var Cards = function Cards(_ref) {
   var cards = _ref.cards,
@@ -5835,18 +5977,18 @@ var Cards = function Cards(_ref) {
   }));
 };
 
-var _templateObject$L, _templateObject2$v, _templateObject3$m, _templateObject4$f, _templateObject5$c;
-var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__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$2 = /*#__PURE__*/styled__default.div(_templateObject2$v || (_templateObject2$v = /*#__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$N, _templateObject2$w, _templateObject3$o, _templateObject4$g, _templateObject5$d;
+var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__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$w || (_templateObject2$w = /*#__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-midgrey)') + ";";
 }, function (_ref2) {
   var hideTopBorder = _ref2.hideTopBorder;
   return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
 }, devices.mobileAndTablet);
-var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__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$c || (_templateObject5$c = /*#__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$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$g || (_templateObject4$g = /*#__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$d || (_templateObject5$d = /*#__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) {
@@ -5875,7 +6017,7 @@ var ContactCard = function ContactCard(_ref) {
     columnSpanDesktop: 8,
     columnStartDevice: 1,
     columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
+  }, /*#__PURE__*/React__default.createElement(Wrapper$4, {
     "data-testid": "contact-card-wrapper",
     hideBottomBorder: hideBottomBorder,
     hideTopBorder: hideTopBorder
@@ -5903,14 +6045,14 @@ var ContactCard = function ContactCard(_ref) {
   }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
 };
 
-var _templateObject$M, _templateObject2$w, _templateObject3$n, _templateObject4$g, _templateObject5$d;
-var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 24px;\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), devices.mobile);
-var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
-var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$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 _templateObject$O, _templateObject2$x, _templateObject3$p, _templateObject4$h, _templateObject5$e;
+var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 24px;\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), devices.mobile);
+var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
+var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$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(_templateObject4$g || (_templateObject4$g = /*#__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 ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__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(_templateObject4$h || (_templateObject4$h = /*#__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 ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__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    display: -webkit-box;\n    -webkit-line-clamp: " + props.truncate + ";\n    -webkit-box-orient: vertical;\n  ";
 });
 
@@ -5970,21 +6112,21 @@ var ContentSummary = function ContentSummary(_ref) {
   }), link.text)));
 };
 
-var _templateObject$N, _templateObject2$x, _templateObject3$o, _templateObject4$h, _templateObject5$e;
-var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__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$P, _templateObject2$y, _templateObject3$q, _templateObject4$i, _templateObject5$f;
+var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__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$x || (_templateObject2$x = /*#__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$y || (_templateObject2$y = /*#__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$o || (_templateObject3$o = /*#__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$q || (_templateObject3$q = /*#__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$h || (_templateObject4$h = /*#__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$e || (_templateObject5$e = /*#__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$i || (_templateObject4$i = /*#__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$f || (_templateObject5$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  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
 
 var Editorial = function Editorial(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -6048,10 +6190,10 @@ var BackgroundColour;
   BackgroundColour["White"] = "white";
 })(BackgroundColour || (BackgroundColour = {}));
 
-var _templateObject$O, _templateObject2$y, _templateObject3$p, _templateObject4$i;
-var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$O || (_templateObject$O = /*#__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$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
-var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 32px 0;\n\n  ", "}\n"])), function (props) {
+var _templateObject$Q, _templateObject2$z, _templateObject3$r, _templateObject4$j;
+var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$Q || (_templateObject$Q = /*#__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$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
+var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 32px 0;\n\n  ", "}\n"])), function (props) {
   if (!props.infoThemed) {
     return;
   } else {
@@ -6062,7 +6204,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$p || (
     }
   }
 });
-var InfoWrapper$1 = /*#__PURE__*/styled__default(Grid)(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: ", ";\n  background: ", "\n  }};\n"])), function (props) {
+var InfoWrapper$1 = /*#__PURE__*/styled__default(Grid)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: ", ";\n  background: ", "\n  }};\n"])), function (props) {
   return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
 }, function (props) {
   return "var(--base-color-" + props.background + ")";
@@ -6175,24 +6317,24 @@ var Information = function Information(_ref) {
   }))));
 };
 
-var _templateObject$P, _templateObject2$z, _templateObject3$q, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$8, _templateObject8$6;
-var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+var _templateObject$R, _templateObject2$A, _templateObject3$s, _templateObject4$k, _templateObject5$g, _templateObject6$a, _templateObject7$8, _templateObject8$6;
+var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  h2 {\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$z || (_templateObject2$z = /*#__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$q || (_templateObject3$q = /*#__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$A || (_templateObject2$A = /*#__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$s || (_templateObject3$s = /*#__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$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 36px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 30px;\n    }\n  }\n"])), function (_ref4) {
+var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 36px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 30px;\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$f || (_templateObject5$f = /*#__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 TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__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$1 = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__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$8 || (_templateObject7$8 = /*#__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"])));
@@ -6273,9 +6415,9 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
 };
 
-var _templateObject$Q, _templateObject2$A, _templateObject3$r, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$9;
-var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n  user-select: none;\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
-var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n  h3 {\n    padding: 0;\n    margin: 0 0 8px 0;\n  }\n\n  @media ", " {\n    & {\n      h3 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), devices.tablet, function (_ref) {
+var _templateObject$S, _templateObject2$B, _templateObject3$t, _templateObject4$l, _templateObject5$h, _templateObject6$b, _templateObject7$9;
+var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n  user-select: none;\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
+var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n  h3 {\n    padding: 0;\n    margin: 0 0 8px 0;\n  }\n\n  @media ", " {\n    & {\n      h3 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), devices.tablet, function (_ref) {
   var theme = _ref.theme;
   return theme.fonts.mobile.sizes.headers[3];
 }, function (_ref2) {
@@ -6288,7 +6430,7 @@ var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A
   var theme = _ref4.theme;
   return theme.fonts.mobile.lineHeights.headers[3];
 });
-var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n\n      > div {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n  }\n"])), devices.tablet, function (_ref5) {
+var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n  user-select: text;\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n\n      > div {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n  }\n"])), devices.tablet, function (_ref5) {
   var theme = _ref5.theme;
   return theme.fonts.mobile.sizes.body[1];
 }, function (_ref6) {
@@ -6301,14 +6443,14 @@ var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$r |
   var theme = _ref8.theme;
   return theme.fonts.mobile.lineHeights.body[1];
 }, devices.mobile);
-var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\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: ", ";\n      width: 100%;\n      padding: 20px;\n    }\n  }\n"])), function (_ref9) {
+var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\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: ", ";\n      width: 100%;\n      padding: 20px;\n    }\n  }\n"])), function (_ref9) {
   var hasImages = _ref9.hasImages;
   return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
 }, devices.mobile, function (_ref10) {
   var hasImages = _ref10.hasImages;
   return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
 });
-var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__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  .swiper-slide {\n    ", "\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 7 / 3 / 15;\n\n      .swiper-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      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), function (_ref11) {
+var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__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  .swiper-slide {\n    ", "\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 7 / 3 / 15;\n\n      .swiper-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      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), function (_ref11) {
   var hasMultipleImages = _ref11.hasMultipleImages;
   return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
 }, devices.tablet, devices.mobile);
@@ -6398,12 +6540,12 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
   }))));
 };
 
-var _templateObject$R, _templateObject2$B, _templateObject3$s, _templateObject4$l, _templateObject5$h, _templateObject6$c, _templateObject7$a, _templateObject8$7;
-var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__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$B || (_templateObject2$B = /*#__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$s || (_templateObject3$s = /*#__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$l || (_templateObject4$l = /*#__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$2 = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
+var _templateObject$T, _templateObject2$C, _templateObject3$u, _templateObject4$m, _templateObject5$i, _templateObject6$c, _templateObject7$a, _templateObject8$7;
+var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__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$C || (_templateObject2$C = /*#__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$u || (_templateObject3$u = /*#__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$m || (_templateObject4$m = /*#__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$2 = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
 var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__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);
@@ -6471,21 +6613,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, "Scroll Down")) : null);
 };
 
-var _templateObject$S, _templateObject2$C, _templateObject3$t, _templateObject4$m, _templateObject5$i;
-var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__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$U, _templateObject2$D, _templateObject3$v, _templateObject4$n, _templateObject5$j;
+var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$U || (_templateObject$U = /*#__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$C || (_templateObject2$C = /*#__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$D || (_templateObject2$D = /*#__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$t || (_templateObject3$t = /*#__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$m || (_templateObject4$m = /*#__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$i || (_templateObject5$i = /*#__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$v || (_templateObject3$v = /*#__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$n || (_templateObject4$n = /*#__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$j || (_templateObject5$j = /*#__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;
@@ -6516,8 +6658,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
   }))));
 };
 
-var _templateObject$T;
-var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
+var _templateObject$V;
+var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
 
 var _excluded$j = ["link"];
 
@@ -6537,11 +6679,11 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
 };
 
-var _templateObject$U, _templateObject2$D, _templateObject3$u, _templateObject5$j, _templateObject6$d, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject10$4;
-var BrandingTextBlock = /*#__PURE__*/styled__default.p(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-overline-4);\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.p(_templateObject2$D || (_templateObject2$D = /*#__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$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
-var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__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: cover;\n  }\n  @media ", " {\n    height: 85vw;\n  }\n"])), devices.mobile);
+var _templateObject$W, _templateObject2$E, _templateObject3$w, _templateObject5$k, _templateObject6$d, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject10$4;
+var BrandingTextBlock = /*#__PURE__*/styled__default.p(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-overline-4);\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.p(_templateObject2$E || (_templateObject2$E = /*#__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$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
+var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__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: cover;\n  }\n  @media ", " {\n    height: 85vw;\n  }\n"])), devices.mobile);
 var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$d || (_templateObject6$d = /*#__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  svg {\n    max-width: 155px;\n    fill: ", ";\n  }\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n  }\n"])), function (_ref) {
   var invert = _ref.invert,
       theme = _ref.theme;
@@ -6622,7 +6764,6 @@ var PageHeadingCompact = function PageHeadingCompact(_ref) {
       bgUrlDesktop = _ref.bgUrlDesktop,
       bgUrlDevice = _ref.bgUrlDevice,
       videoUrlDesktop = _ref.videoUrlDesktop,
-      videoUrlMobile = _ref.videoUrlMobile,
       _ref$bgImageAltText = _ref.bgImageAltText,
       bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
       _ref$invert = _ref.invert,
@@ -6638,24 +6779,21 @@ var PageHeadingCompact = function PageHeadingCompact(_ref) {
 
   var titleSize = title && title.length > 20 ? 4 : 3;
   var videoElementId = 'compact-header-video';
+  var isIOS = useIOS();
   return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? /*#__PURE__*/React__default.createElement(SponsorWrapper, {
     "data-testid": "compact-sponsor"
   }, customSponsorImage ? /*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
     "data-testid": "compact-custom-sponsor"
   }, customSponsorImage, {
     isCustomImage: true
-  })) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, videoUrlDesktop || videoUrlMobile ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
+  })) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, !isIOS && videoUrlDesktop ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
     loop: true,
     muted: true,
     playsInline: true,
     "data-testid": "compact-video",
     id: videoElementId
-  }, videoUrlDesktop && /*#__PURE__*/React__default.createElement("source", {
-    src: videoUrlDesktop,
-    media: "" + devices.desktop
-  }), videoUrlMobile && /*#__PURE__*/React__default.createElement("source", {
-    src: videoUrlMobile,
-    media: "" + devices.mobile
+  }, /*#__PURE__*/React__default.createElement("source", {
+    src: videoUrlDesktop
   }), /*#__PURE__*/React__default.createElement("img", {
     src: bgUrlDesktop,
     alt: bgImageAltText,
@@ -6694,15 +6832,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref) {
   }), linkText))));
 };
 
-var _templateObject$V, _templateObject2$E, _templateObject3$v, _templateObject4$n;
-var MorePages = /*#__PURE__*/styled__default.span(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
-var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$E || (_templateObject2$E = /*#__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 _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject4$o;
+var MorePages = /*#__PURE__*/styled__default.span(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
+var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$F || (_templateObject2$F = /*#__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(reactRouterDom.Link)(_templateObject3$v || (_templateObject3$v = /*#__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(reactRouterDom.Link)(_templateObject3$x || (_templateObject3$x = /*#__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$n || (_templateObject4$n = /*#__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$o || (_templateObject4$o = /*#__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
@@ -6771,12 +6909,12 @@ var Pagination = function Pagination(_ref) {
   }))));
 };
 
-var _templateObject$W, _templateObject2$F, _templateObject3$w, _templateObject4$o, _templateObject5$k, _templateObject6$e;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$W || (_templateObject$W = /*#__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$F || (_templateObject2$F = /*#__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$w || (_templateObject3$w = /*#__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$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
-var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n"])));
+var _templateObject$Y, _templateObject2$G, _templateObject3$y, _templateObject4$p, _templateObject5$l, _templateObject6$e;
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__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$G || (_templateObject2$G = /*#__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$y || (_templateObject3$y = /*#__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$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
+var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n"])));
 var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$e || (_templateObject6$e = /*#__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 Person = function Person(_ref) {
@@ -6828,14 +6966,14 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$X, _templateObject2$G, _templateObject3$x, _templateObject4$p, _templateObject5$l, _templateObject6$f, _templateObject7$c, _templateObject8$9, _templateObject9$5, _templateObject10$5, _templateObject11$3, _templateObject12$2, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject4$q, _templateObject5$m, _templateObject6$f, _templateObject7$c, _templateObject8$9, _templateObject9$5, _templateObject10$5, _templateObject11$3, _templateObject12$2, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _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$X || (_templateObject$X = /*#__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$Z || (_templateObject$Z = /*#__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) {
@@ -6845,8 +6983,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X ||
   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$G || (_templateObject2$G = /*#__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$x || (_templateObject3$x = /*#__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: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref4) {
+var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$H || (_templateObject2$H = /*#__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$z || (_templateObject3$z = /*#__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: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.black;
 }, function (_ref5) {
@@ -6856,7 +6994,7 @@ var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$x || (
   var theme = _ref6.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__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 (_ref7) {
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__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 (_ref7) {
   var hasTextLinks = _ref7.hasTextLinks;
   return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
 }, function (_ref8) {
@@ -6884,7 +7022,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$p ||
 
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref10) {
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref10) {
   var marginBottom = _ref10.marginBottom;
   return marginBottom + "px";
 });
@@ -7110,26 +7248,26 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$Y, _templateObject2$H, _templateObject3$y, _templateObject4$q, _templateObject5$m, _templateObject6$g, _templateObject7$d;
+var _templateObject$_, _templateObject2$I, _templateObject3$A, _templateObject4$r, _templateObject5$n, _templateObject6$g, _templateObject7$d;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__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$_ || (_templateObject$_ = /*#__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$H || (_templateObject2$H = /*#__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$I || (_templateObject2$I = /*#__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$y || (_templateObject3$y = /*#__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$A || (_templateObject3$A = /*#__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$q || (_templateObject4$q = /*#__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$m || (_templateObject5$m = /*#__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 PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__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$n || (_templateObject5$n = /*#__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$g || (_templateObject6$g = /*#__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: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.black;
@@ -7227,8 +7365,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
 };
 
-var _templateObject$Z;
-var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__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$$;
+var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__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,
@@ -7254,8 +7392,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description))));
 };
 
-var _templateObject$_, _templateObject2$I, _templateObject3$z, _templateObject4$r, _templateObject5$n, _templateObject6$h, _templateObject7$e, _templateObject8$a, _templateObject9$6, _templateObject10$6, _templateObject11$4;
-var stateStyles = /*#__PURE__*/styled.css(_templateObject$_ || (_templateObject$_ = /*#__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$10, _templateObject2$J, _templateObject3$B, _templateObject4$s, _templateObject5$o, _templateObject6$h, _templateObject7$e, _templateObject8$a, _templateObject9$6, _templateObject10$6, _templateObject11$4;
+var stateStyles = /*#__PURE__*/styled.css(_templateObject$10 || (_templateObject$10 = /*#__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) {
@@ -7265,12 +7403,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$_ || (_templateObject$
   var theme = _ref3.theme;
   return theme.colors.lightgrey;
 });
-var borderStyles = /*#__PURE__*/styled.css(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
+var borderStyles = /*#__PURE__*/styled.css(_templateObject2$J || (_templateObject2$J = /*#__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$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
+var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$s || (_templateObject4$s = /*#__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 {
@@ -7278,8 +7416,8 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
     color: theme.colors.black,
     title: 'Select Arrow'
   };
-})(_templateObject5$n || (_templateObject5$n = /*#__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$3 = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
+})(_templateObject5$o || (_templateObject5$o = /*#__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$h || (_templateObject6$h = /*#__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$e || (_templateObject7$e = /*#__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) {
@@ -7616,7 +7754,7 @@ function Select(_ref3) {
       document.removeEventListener('click', closeSelectOnBlur, false);
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement(Wrapper$3, null, label !== '' && /*#__PURE__*/React__default.createElement(BodyText, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1,
     tag: "p",
     "data-testid": "select-label"
@@ -7664,8 +7802,8 @@ function Select(_ref3) {
   }))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$$;
-var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__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  text-transform: var(--text-transform-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\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    margin: 80px 0 16px;\n\n    @media ", " {\n      margin-top: 60px;\n    }\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\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    margin: 80px 0 16px;\n\n    @media ", " {\n      margin-top: 60px;\n    }\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: ", ";\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & strong {\n    font-weight: bold;\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  & ul {\n    padding: 0;\n    list-style: none;\n    margin: 0 0 0 30px;\n\n    li {\n      text-indent: -24px;\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0 0 0 20px;\n\n    li {\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 0px;\n    margin-left: 20px;\n  }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
+var _templateObject$11;
+var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__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  text-transform: var(--text-transform-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\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    margin: 80px 0 16px;\n\n    @media ", " {\n      margin-top: 60px;\n    }\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\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    margin: 80px 0 16px;\n\n    @media ", " {\n      margin-top: 60px;\n    }\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: ", ";\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & strong {\n    font-weight: bold;\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  & ul {\n    padding: 0;\n    list-style: none;\n    margin: 0 0 0 30px;\n\n    li {\n      text-indent: -24px;\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0 0 0 20px;\n\n    li {\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 0px;\n    margin-left: 20px;\n  }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 });
@@ -7686,15 +7824,15 @@ var TextOnly = function TextOnly(_ref) {
     columnSpanDesktop: columnSpanDesktop,
     columnStartDevice: columnStartDevice,
     columnSpanDevice: columnSpanDevice
-  }, /*#__PURE__*/React__default.createElement(TextContainer$1, {
+  }, /*#__PURE__*/React__default.createElement(TextContainer$2, {
     dangerouslySetInnerHTML: {
       __html: text
     }
   })));
 };
 
-var _templateObject$10, _templateObject2$J;
-var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 12px - var(--line-height-body-2));\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), ImageAspectRatioWrapper, function (_ref) {
+var _templateObject$12, _templateObject2$K;
+var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 12px - var(--line-height-body-2));\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), ImageAspectRatioWrapper, function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
       aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -7704,7 +7842,7 @@ var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templat
       height = _ref2.height;
   return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
 });
-var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__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.div(_templateObject2$K || (_templateObject2$K = /*#__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,
@@ -7733,7 +7871,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
       return window.removeEventListener('resize', setWrapperHeight);
     };
   }, [wrapperRef]);
-  return /*#__PURE__*/React__default.createElement(Wrapper$4, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$6, {
     aspectRatio: aspectRatio,
     ref: wrapperRef,
     height: height
@@ -7742,13 +7880,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
 };
 
-var _templateObject$11, _templateObject2$K, _templateObject3$A;
-var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
-var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$13, _templateObject2$L, _templateObject3$C;
+var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
 });
-var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__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$C || (_templateObject3$C = /*#__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 Quote = function Quote(_ref) {
   var text = _ref.text,
@@ -7772,8 +7910,112 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$12;
-var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$12 || (_templateObject$12 = /*#__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\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-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\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\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
+var UpsellSection = function UpsellSection(_ref) {
+  var title = _ref.title,
+      richText = _ref.richText,
+      upsellCards = _ref.upsellCards,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
+  return /*#__PURE__*/React__default.createElement(Theme, {
+    theme: theme
+  }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 3,
+    columnSpanDesktop: 12,
+    columnStartDevice: 2,
+    columnSpanDevice: 12,
+    columnStartSmallDevice: 1,
+    columnSpanSmallDevice: 14
+  }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 3
+  }, title)), /*#__PURE__*/React__default.createElement(TextContainer, null, /*#__PURE__*/React__default.createElement(TextOnly, {
+    text: richText != null ? richText : '',
+    columnStartDesktop: 1,
+    columnSpanDesktop: 14,
+    columnStartDevice: 1,
+    columnSpanDevice: 14
+  })), /*#__PURE__*/React__default.createElement(UpsellCards, {
+    upsellCards: upsellCards
+  })))));
+};
+
+var SCRIPT_SRC = 'https://talkdeskchatsdk.talkdeskapp.com/talkdeskchatsdk.js?t=';
+var DATA_BIND = '5ea4b1ad-1a17-11ec-af32-06f09e0065e0';
+var DATA_ORG = '';
+var DIV_ID = 'tdWebchat';
+var THEME_ICON = 'https://static.roh.org.uk/logos/crest.svg';
+var THEME_FONT_BODY = fontFamilies.sansSerifFallback;
+var THEME_COLOR = core.colors.core;
+var THEME_COLOR_LIGHT = core.colors.core + '80';
+var THEME_COLOR_BLACK = core.colors.black;
+var THEME_COLOR_LIGHTGREY = core.colors.lightgrey;
+var THEME_COLOR_WHITE = core.colors.white;
+var THEME_COLOR_MIDGREY = core.colors.midgrey;
+var SCRIPT_CONTENT = "var webchat;\n((window, document, node, props, configs) => {\n  if (window.TalkdeskChatSDK) {\n    console.error(\"TalkdeskChatSDK already included\");\n    return;\n  }\n  var divContainer = document.createElement(\"div\");\n  divContainer.id = node;\n  document.body.appendChild(divContainer);\n  var currentDate = new Date().getTime();\n  var src = \"" + SCRIPT_SRC + "\" + currentDate;\n  var script = document.createElement(\"script\");\n  var firstScriptTag = document.getElementsByTagName(\"script\")[0];\n  script.type = \"text/javascript\";\n  script.charset = \"UTF-8\";\n  script.id = \"tdwebchatscript\";\n  script.src = src;\n  script.async = true;\n  firstScriptTag.parentNode.insertBefore(script, firstScriptTag);\n  script.onload = () => {\n    webchat = TalkdeskChatSDK(node, props);\n    webchat.init(configs);\n  };\n})(\n  window,\n  document,\n  \"" + DIV_ID + "\",\n  { flowId: \"cd19d348b5fb4a0ab0d3277686f28d1e\", accountId: \"\", region: \"td-us-1\" },\n  { enableEmoji: true, enableUserInput: true, styles :{\n    \"botIcon\": \"" + THEME_ICON + "\",\n    \"botBackgroundColor\":\"" + THEME_COLOR_LIGHTGREY + "\",\n    \"botTextColor\": \"" + THEME_COLOR_BLACK + "\",\n    \"chatTitle\": \"Royal Opera House\",\n    \"chatThemeColor\": \"" + THEME_COLOR + "\",\n    \"chatTitleIcon\": \"" + THEME_ICON + "\",\n    \"customButtonBackgroundColor\": \"" + THEME_COLOR + "\",\n    \"customButtonBorderColor\": \"" + THEME_COLOR + "\",\n    \"customButtonColor\": \"" + THEME_COLOR_WHITE + "\",\n    \"userBackgroundColor\":\"" + THEME_COLOR_LIGHTGREY + "\",\n    \"userTextColor\": \"" + THEME_COLOR_BLACK + "\",\n    \"userBackgroundColor\":\"" + THEME_COLOR_MIDGREY + "\",\n    \"userTextColor\": \"" + THEME_COLOR_BLACK + "\",\n    \"welcomeMessageBackgroundColor\": \"" + THEME_COLOR_LIGHT + "\",\n    \"welcomeMessageContentFontSize\": \"18px\",\n    \"welcomeMessageTitleFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"welcomeMessageContentFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customMessageFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customMessageNoBubbleFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customButtonFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customFieldLabelFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customFieldInputFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customDropdownLabelFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"customDropdownInputFontFamily\": \"" + THEME_FONT_BODY + "\",\n    \"startChatButtonBackgroundColor\": \"" + THEME_COLOR + "\",\n    \"startChatButtonBorderColor\": \"" + THEME_COLOR + "\",\n    \"startChatButtonTextColor\": \"" + THEME_COLOR_WHITE + "\",\n    \"startChatButtonHoverBackgroundColor\": \"" + THEME_COLOR + "\",\n    \"startChatButtonHoverBorderColor\": \"" + THEME_COLOR + "\",\n    \"startChatButtonHoverTextColor\": \"" + THEME_COLOR_WHITE + "\",\n    \"startChatButtonFontFamily\": \"" + THEME_FONT_BODY + "\",\n  }}\n);";
+
+var loadLiveChatScript = function loadLiveChatScript(callback) {
+  var existingScript = document.getElementById(DIV_ID);
+
+  if (!existingScript) {
+    var liveChatDiv = document.createElement('div');
+    liveChatDiv.id = DIV_ID;
+    liveChatDiv.setAttribute('data-bind', DATA_BIND);
+    liveChatDiv.setAttribute('data-org', DATA_ORG);
+    var script = document.createElement('script');
+    var scriptBody = document.createTextNode(SCRIPT_CONTENT);
+    script.appendChild(scriptBody);
+    document.body.appendChild(liveChatDiv);
+    document.body.appendChild(script);
+
+    script.onload = function () {
+      if (callback) callback();
+    };
+  }
+
+  if (existingScript && callback) callback();
+};
+
+var LiveChat = function LiveChat() {
+  // eslint-disable-next-line
+  var _React$useState = React.useState(false),
+      loaded = _React$useState[0],
+      setLoaded = _React$useState[1];
+
+  React.useEffect(function () {
+    loadLiveChatScript(function () {
+      setLoaded(true);
+    });
+  });
+  return /*#__PURE__*/React.createElement("span", {
+    "data-loaded": loaded
+  });
+};
+
+var _templateObject$14, _templateObject2$M;
+var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--base-color-white);\n"])), zIndexes.anchor);
+var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 2px solid var(--base-color-lightgrey);\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), devices.mobileAndTablet, devices.mobile);
+
+var StickyBar = function StickyBar(_ref) {
+  var _ref$columnStartDeskt = _ref.columnStartDesktop,
+      columnStartDesktop = _ref$columnStartDeskt === void 0 ? 3 : _ref$columnStartDeskt,
+      _ref$columnSpanDeskto = _ref.columnSpanDesktop,
+      columnSpanDesktop = _ref$columnSpanDeskto === void 0 ? 8 : _ref$columnSpanDeskto,
+      _ref$columnStartDevic = _ref.columnStartDevice,
+      columnStartDevice = _ref$columnStartDevic === void 0 ? 2 : _ref$columnStartDevic,
+      _ref$columnSpanDevice = _ref.columnSpanDevice,
+      columnSpanDevice = _ref$columnSpanDevice === void 0 ? 12 : _ref$columnSpanDevice,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(StickyBarWrapper, {
+    "data-testid": "sticky-bar-block"
+  }, /*#__PURE__*/React__default.createElement(StickyBarGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: columnStartDesktop,
+    columnSpanDesktop: columnSpanDesktop,
+    columnStartDevice: columnStartDevice,
+    columnSpanDevice: columnSpanDevice
+  }, children)));
+};
+
+var _templateObject$15;
+var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$15 || (_templateObject$15 = /*#__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\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-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\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\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
@@ -8751,6 +8993,8 @@ exports.Tickbox = Tickbox;
 exports.Timer = Timer;
 exports.TitleWithCTA = TitleWithCTA;
 exports.TypeTags = TypeTags;
+exports.UpsellCard = UpsellCard;
+exports.UpsellSection = UpsellSection;
 exports.devices = devices;
 exports.zIndexes = zIndexes;
 //# sourceMappingURL=chord.cjs.development.js.map