@royaloperahouse/chord 1.23.0 → 1.23.2-b-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;
@@ -3607,7 +3609,7 @@ var Progress = function Progress(_ref) {
 };
 
 var _templateObject$q;
-var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  & li {\n    color: var(--base-color-black);\n    display: inline-block;\n    margin: 0;\n  }\n\n  & li:before {\n    content: '\u2014';\n    margin: 0 0.5em;\n  }\n\n  & li:first-child:before {\n    display: none;\n  }\n"])));
+var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  & li {\n    display: inline-block;\n    margin: 0;\n  }\n\n  & li:before {\n    content: '\u2014';\n    margin: 0 0.5em;\n  }\n\n  & li:first-child:before {\n    display: none;\n  }\n"])));
 
 var TypeTags = function TypeTags(_ref) {
   var list = _ref.list;
@@ -3804,15 +3806,243 @@ var VideoControls = function VideoControls(_ref) {
   })));
 };
 
-var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11;
-var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    ", "\n  }\n"])), devices.mobileAndTablet, function (_ref) {
+var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$3;
+var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: left;\n  align-items: left;\n"])));
+var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-", ");\n  margin-block: 15px 0;\n\n  * {\n    margin: 0;\n  }\n"])), function (_ref) {
+  var darkMode = _ref.darkMode;
+  return darkMode ? 'white' : 'errorstate';
+});
+var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 154px;\n  height: 48px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border: 1px solid\n    var(\n      --base-color-", "\n    );\n  background-color: var(--base-color-", ");\n  ", ";\n\n  * {\n    color: var(--base-color-", ");\n    word-break: unset;\n    user-select: none;\n  }\n\n  path {\n    fill: var(--base-color-", ") !important;\n  }\n\n  & > * {\n    width: 51px;\n  }\n"])), function (_ref2) {
+  var darkMode = _ref2.darkMode,
+      disabled = _ref2.disabled,
+      error = _ref2.error;
+  if (error) return 'errorstate';
+  if (disabled) return 'midgrey';
+  if (darkMode) return 'darkgrey';
+  return 'darkgrey';
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? 'lightgrey' : 'white';
+}, function (_ref4) {
+  var error = _ref4.error,
+      darkMode = _ref4.darkMode;
+  return error && darkMode ? 'outline: 1px solid var(--base-color-errorstate);' : '';
+}, function (_ref5) {
+  var disabled = _ref5.disabled;
+  return disabled ? 'midgrey' : 'black';
+}, function (_ref6) {
+  var disabled = _ref6.disabled;
+  return disabled ? 'midgrey' : 'black';
+});
+var StepperValue = /*#__PURE__*/styled__default.input(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 51px;\n  border: 0;\n  text-align: center;\n  font-family: var(--font-family-altHeader);\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  background-color: transparent;\n  cursor: ", ";\n"])), function (_ref7) {
+  var disabled = _ref7.disabled;
+  return disabled ? 'not-allowed' : 'text';
+});
+var StepperButton = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: ", ";\n\n  span {\n    display: flex;\n    justify-content: center;\n  }\n\n  svg {\n    width: 40%;\n    height: auto;\n  }\n"])), function (_ref8) {
+  var disabled = _ref8.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+});
+
+/**
+ * A chord Stepper component, used similarly to an HTML input type number.
+ *
+ * The buttons are clickable but not keyboard focusable
+ *
+ * An `initialValue`, the `step` to increase / decrease by, `min`
+ * and `max` values can all be provided, but are optional, with defaults.
+ *
+ * The displayed value can be controlled by:
+ *
+ * - Entering a value in to the central input area (both mouse and keyboard-focusable)
+ *
+ * - Clicking the buttons on either side (mouse only)
+ *
+ * - Keyboard-focusing the stepper box and using the arrow keys
+ *
+ * In all cases the value will be clamped between min and max values.
+ *
+ * The maximum width of the component is 4 characters, meaning 3 digits with a
+ * sign, or 4 without.
+ *
+ * Optional `plusAction` and `minusAction` functions can be provided and will be
+ * called on click of the corresponding buttons.
+ *
+ * The component will display an `error` string beneath the stepper box, if present.
+ *
+ * Styles are provided for the `disabled` state and for display on dark or
+ * coloured backgrounds, using the `darkMode` boolean.
+ *
+ * Finally, an `accessibleName` string can be provided. Although optional,
+ * it's a very good idea to include this so that users of screen-readers
+ * know what they are actually controlling.
+ *
+ * Example:
+ *
+ * ```tsx
+ * import { Stepper } from '@royaloperahouse/chord'
+ *
+ * <div>
+ *   <p>How How many seas must a white dove sail before she sleeps in the sand?</p>
+ *   <Stepper
+ *     initialValue={12}
+ *     step={2}
+ *     min={-8}
+ *     max={667}
+ *     plusAction={() => {console.log('More seas')}}
+ *     minusAction={() => {console.log('Fewer seas')}}
+ *     darkMode={false}
+ *     disabled={false}
+ *     error="Something went wrong!"
+ *     accessibleName="Number of seas"
+ *   />
+ * </div>
+ */
+
+var Component = function Component(_ref) {
+  var _ref$initialValue = _ref.initialValue,
+      initialValue = _ref$initialValue === void 0 ? 1 : _ref$initialValue,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? -999 : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 1000 : _ref$max,
+      minusAction = _ref.minusAction,
+      plusAction = _ref.plusAction,
+      darkMode = _ref.darkMode,
+      error = _ref.error,
+      disabled = _ref.disabled,
+      accessibleName = _ref.accessibleName;
+
+  var _useState = React.useState(initialValue.toString()),
+      displayValue = _useState[0],
+      setDisplayValue = _useState[1];
+
+  var validInput = /^-?\d+?$/;
+
+  var clampValue = function clampValue(val, min, max) {
+    return Math.min(Math.max(+val, min), max);
+  };
+
+  var parseSigned = function parseSigned(input) {
+    return input.startsWith('0') ? '-' : "-" + input.slice(0, input.length - 1);
+  };
+
+  var zeroSoloSign = function zeroSoloSign(input) {
+    return input === '-' ? '0' : input;
+  };
+
+  var decrement = function decrement() {
+    if (disabled) return;
+    setDisplayValue(clampValue(+zeroSoloSign(displayValue) - step, min, max).toString());
+    if (minusAction) minusAction();
+  };
+
+  var increment = function increment() {
+    if (disabled) return;
+    setDisplayValue(clampValue(+zeroSoloSign(displayValue) + step, min, max).toString());
+    if (plusAction) plusAction();
+  };
+
+  var setMinimumValue = function setMinimumValue() {
+    setDisplayValue(min.toString());
+    if (minusAction) minusAction();
+  };
+
+  var setMaximumValue = function setMaximumValue() {
+    setDisplayValue(max.toString());
+    if (plusAction) plusAction();
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (!disabled) {
+      switch (e.key) {
+        case 'ArrowUp':
+        case 'ArrowRight':
+          increment();
+          break;
+
+        case 'ArrowDown':
+        case 'ArrowLeft':
+          decrement();
+          break;
+
+        case 'Home':
+          setMinimumValue();
+          break;
+
+        case 'End':
+          setMaximumValue();
+          break;
+      }
+    }
+  };
+
+  var handleInputChange = function handleInputChange(event) {
+    var input = event.target.value;
+
+    if (input.endsWith('-')) {
+      setDisplayValue(parseSigned(input));
+      return;
+    }
+
+    var val = !!event.target.value ? event.target.value : '0';
+
+    if (val.match(validInput)) {
+      setDisplayValue(clampValue(val, min, max).toString());
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement(StepperWrapper, {
+    "data-testid": "stepper-wrapper"
+  }, /*#__PURE__*/React__default.createElement(StepperBox, {
+    role: "spinbutton",
+    "aria-valuenow": parseInt(displayValue),
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-labelledby": accessibleName,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    error: error,
+    darkMode: darkMode,
+    disabled: disabled,
+    "data-testid": "stepper-box"
+  }, /*#__PURE__*/React__default.createElement(StepperButton, {
+    onClick: decrement,
+    disabled: disabled,
+    "data-testid": "left-stepper-button"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "Detract"
+  })), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(StepperValue, {
+    disabled: disabled,
+    "aria-disabled": disabled,
+    maxLength: 4,
+    onChange: handleInputChange,
+    value: displayValue,
+    "data-testid": "stepper-value"
+  })), /*#__PURE__*/React__default.createElement(StepperButton, {
+    onClick: increment,
+    disabled: disabled,
+    "data-testid": "right-stepper-button"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "Expand"
+  }))), error && /*#__PURE__*/React__default.createElement(StepperError, {
+    darkMode: darkMode,
+    "data-testid": "stepper-error"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, error)));
+};
+
+var _templateObject$u, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11;
+var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    ", "\n  }\n"])), devices.mobileAndTablet, function (_ref) {
   var isMenuOpen = _ref.isMenuOpen;
   return isMenuOpen && "\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: " + zIndexes.overlay + ";\n      background-color: var(--base-color-white);\n      overflow-y: auto;\n      scrollbar-width: none;\n      ::-webkit-scrollbar {\n        display: none;\n      }\n    ";
 });
-var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 100vw;\n  position: absolute;\n  z-index: ", ";\n  opacity: 0.4;\n"])), zIndexes.searchOverlay);
-var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--base-color-white);\n  height: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 80px;\n  }\n"])), zIndexes.navigation, devices.mobile);
-var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  height: 100px;\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 100%;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
-var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n  height: 100px;\n\n  @media ", " {\n    height: 100%;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
+var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 100vw;\n  position: absolute;\n  z-index: ", ";\n  opacity: 0.4;\n"])), zIndexes.searchOverlay);
+var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--base-color-white);\n  height: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 80px;\n  }\n"])), zIndexes.navigation, devices.mobile);
+var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  height: 100px;\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 100%;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
+var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n  height: 100px;\n\n  @media ", " {\n    height: 100%;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
 var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    background-color: var(--base-color-white);\n    padding-top: ", ";\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet, function (_ref2) {
   var theme = _ref2.theme;
   return theme.spacing[12];
@@ -3823,8 +4053,8 @@ var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9 || (_templa
 var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 3 / span 14;\n  }\n"])), devices.desktop);
 var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 26px;\n  right: 50px;\n  top: 20px;\n  position: absolute;\n\n  @media ", " {\n    margin-top: 1px;\n    position: inherit;\n  }\n"])), devices.mobileAndTablet);
 
-var _templateObject$u;
-var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 66px;\n  height: auto;\n  cursor: pointer;\n  & img {\n    width: auto;\n    height: 100%;\n  }\n"])));
+var _templateObject$v;
+var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 66px;\n  height: auto;\n  cursor: pointer;\n  & img {\n    width: auto;\n    height: 100%;\n  }\n"])));
 
 var Logo$1 = function Logo(_ref) {
   var _ref$id = _ref.id,
@@ -3853,11 +4083,11 @@ var Logo$1 = function Logo(_ref) {
   }))));
 };
 
-var _templateObject$v;
-var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__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$w;
+var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__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$w, _templateObject2$h, _templateObject3$b, _templateObject4$8;
-var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__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 _templateObject$x, _templateObject2$i, _templateObject3$c, _templateObject4$9;
+var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__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;
 
@@ -3885,9 +4115,9 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$w || (_te
 
   return '';
 });
-var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$h || (_templateObject2$h = /*#__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$b || (_templateObject3$b = /*#__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$8 || (_templateObject4$8 = /*#__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 SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__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$c || (_templateObject3$c = /*#__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$9 || (_templateObject4$9 = /*#__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;
@@ -4045,8 +4275,8 @@ var Basket$1 = function Basket(_ref) {
   }, expiryTime ? basketText : text) : ''));
 };
 
-var _templateObject$x, _templateObject2$i;
-var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__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  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
+var _templateObject$y, _templateObject2$j;
+var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__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  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
   var selected = _ref.selected,
       colorPrimary = _ref.colorPrimary;
 
@@ -4062,7 +4292,7 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$x || (_te
   var colorPrimary = _ref3.colorPrimary;
   return colorPrimary;
 });
-var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
+var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 
 var Search$1 = function Search(_ref) {
   var _ref$selected = _ref.selected,
@@ -4337,23 +4567,23 @@ var NavTop = function NavTop(_ref) {
   }));
 };
 
-var _templateObject$y, _templateObject2$j, _templateObject3$c, _templateObject4$9;
-var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n"])));
-var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n\n  @media ", " {\n    column-gap: 15px;\n  }\n\n  @media ", ", ", " {\n    div:last-child > div {\n      right: 1px;\n    }\n  }\n\n  @media ", " {\n    ", "\n  }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
+var _templateObject$z, _templateObject2$k, _templateObject3$d, _templateObject4$a;
+var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n"])));
+var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n\n  @media ", " {\n    column-gap: 15px;\n  }\n\n  @media ", ", ", " {\n    div:last-child > div {\n      right: 1px;\n    }\n  }\n\n  @media ", " {\n    ", "\n  }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
   if (props.showMenu) {
     return "\n          display: flex;\n          flex-direction: column;\n          row-gap: 32px;\n        ";
   }
 
   return "display: none;";
 });
-var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  width: 60px;\n\n  & a {\n    font-size: var(--font-size-navigation);\n    font-family: var(--font-family-navigation);\n    font-weight: var(--font-weight-navigation);\n    letter-spacing: var(--letter-spacing-navigation);\n    color: var(--base-color-black);\n    text-decoration: none;\n    cursor: pointer;\n\n    :hover {\n      color: var(--base-color-", ");\n    }\n  }\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n\n  @media ", " {\n    display: block;\n\n    svg {\n      width: 24px;\n      height: 24px;\n      margin-left: 40px;\n      margin-top: -20px;\n    }\n\n    a {\n      margin-left: 20px;\n    }\n  }\n"])), function (_ref) {
+var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  width: 60px;\n\n  & a {\n    font-size: var(--font-size-navigation);\n    font-family: var(--font-family-navigation);\n    font-weight: var(--font-weight-navigation);\n    letter-spacing: var(--letter-spacing-navigation);\n    color: var(--base-color-black);\n    text-decoration: none;\n    cursor: pointer;\n\n    :hover {\n      color: var(--base-color-", ");\n    }\n  }\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n\n  @media ", " {\n    display: block;\n\n    svg {\n      width: 24px;\n      height: 24px;\n      margin-left: 40px;\n      margin-top: -20px;\n    }\n\n    a {\n      margin-left: 20px;\n    }\n  }\n"])), function (_ref) {
   var colorPrimary = _ref.colorPrimary;
   return colorPrimary;
 }, function (_ref2) {
   var colorPrimary = _ref2.colorPrimary;
   return colorPrimary;
 }, devices.mobileAndTablet);
-var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    a {\n      margin-left: 20px;\n    }\n  }\n"])), devices.mobileAndTablet);
+var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    a {\n      margin-left: 20px;\n    }\n  }\n"])), devices.mobileAndTablet);
 
 var Tabs = function Tabs(_ref) {
   var _ref$items = _ref.items,
@@ -4480,11 +4710,11 @@ var Tabs = function Tabs(_ref) {
   }, "MENU"))));
 };
 
-var _templateObject$z, _templateObject2$k, _templateObject3$d, _templateObject5$4, _templateObject6$3, _templateObject7$3;
-var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  background-color: var(--base-color-transparent);\n\n  @media ", " {\n    column-gap: 12px;\n  }\n"])), devices.mobile);
-var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
-var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--base-color-navigation);\n    }\n  }\n"])));
-var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-search);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--base-color-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n"])), devices.mobile);
+var _templateObject$A, _templateObject2$l, _templateObject3$e, _templateObject5$5, _templateObject6$3, _templateObject7$3;
+var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  background-color: var(--base-color-transparent);\n\n  @media ", " {\n    column-gap: 12px;\n  }\n"])), devices.mobile);
+var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
+var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--base-color-navigation);\n    }\n  }\n"])));
+var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-search);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--base-color-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n"])), devices.mobile);
 var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  height: 24px;\n  width: 24px;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 
@@ -4713,18 +4943,18 @@ var Navigation = function Navigation(_ref) {
   })))));
 };
 
-var _templateObject$A, _templateObject2$l, _templateObject3$e, _templateObject4$a, _templateObject5$5, _templateObject6$4;
-var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n"])));
-var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-height);\n  padding-top: var(--footer-padding-top);\n  padding-bottom: var(--footer-padding-bottom);\n  display: grid;\n  grid-template-rows:\n    min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n      --footer-vertical-spacing-sm\n    )\n    min-content;\n  grid-template-areas:\n    'row1'\n    '.'\n    'row2'\n    '.'\n    'row3'\n    '.'\n    'row4';\n"])));
-var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row1;\n  justify-self: center;\n\n  @media ", " {\n    & {\n      justify-self: start;\n      grid-area: row2;\n    }\n  }\n"])), devices.mobile);
-var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row2;\n\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), devices.mobile);
-var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row3;\n  justify-self: center;\n\n  @media ", " {\n    justify-self: start;\n  }\n"])), devices.mobile);
+var _templateObject$B, _templateObject2$m, _templateObject3$f, _templateObject4$b, _templateObject5$6, _templateObject6$4;
+var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n"])));
+var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-height);\n  padding-top: var(--footer-padding-top);\n  padding-bottom: var(--footer-padding-bottom);\n  display: grid;\n  grid-template-rows:\n    min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n      --footer-vertical-spacing-sm\n    )\n    min-content;\n  grid-template-areas:\n    'row1'\n    '.'\n    'row2'\n    '.'\n    'row3'\n    '.'\n    'row4';\n"])));
+var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row1;\n  justify-self: center;\n\n  @media ", " {\n    & {\n      justify-self: start;\n      grid-area: row2;\n    }\n  }\n"])), devices.mobile);
+var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row2;\n\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), devices.mobile);
+var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row3;\n  justify-self: center;\n\n  @media ", " {\n    justify-self: start;\n  }\n"])), devices.mobile);
 var AdditionalInfo = /*#__PURE__*/styled__default.p(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row4;\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-body-3);\n  line-height: var(--line-height-body-3);\n  text-align: center;\n  margin: 0;\n  padding: 0;\n\n  @media ", " {\n    text-align: left;\n  }\n"])), devices.mobile);
 
-var _templateObject$B, _templateObject2$m, _templateObject3$f;
-var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 auto;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  gap: var(--footer-items-gap);\n\n  @media ", " {\n    & {\n      margin: 0;\n      flex-direction: column;\n    }\n  }\n"])), devices.mobile);
-var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  text-align: center;\n\n  @media ", " {\n    & {\n      text-align: left;\n    }\n  }\n"])), devices.mobile);
-var PolicyLink = /*#__PURE__*/styled__default.a(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: fit-content;\n  text-decoration: none;\n  text-transform: uppercase;\n  color: var(--base-color-white);\n  cursor: pointer;\n"])));
+var _templateObject$C, _templateObject2$n, _templateObject3$g;
+var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 auto;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  gap: var(--footer-items-gap);\n\n  @media ", " {\n    & {\n      margin: 0;\n      flex-direction: column;\n    }\n  }\n"])), devices.mobile);
+var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  text-align: center;\n\n  @media ", " {\n    & {\n      text-align: left;\n    }\n  }\n"])), devices.mobile);
+var PolicyLink = /*#__PURE__*/styled__default.a(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: fit-content;\n  text-decoration: none;\n  text-transform: uppercase;\n  color: var(--base-color-white);\n  cursor: pointer;\n"])));
 
 var PolicyLinks = function PolicyLinks(_ref) {
   var _ref$items = _ref.items,
@@ -4740,12 +4970,12 @@ var PolicyLinks = function PolicyLinks(_ref) {
   }));
 };
 
-var _templateObject$C, _templateObject2$n, _templateObject3$g, _templateObject4$b, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$2;
-var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n  grid-template-rows: 100px;\n  gap: 0;\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content min-content;\n      gap: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
-var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2;\n  justify-self: center;\n  height: 100%;\n  border: 1px solid var(--base-color-white);\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      display: none;\n    }\n  }\n"])), devices.mobile);
-var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1;\n  padding-top: 9px;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      align-items: start;\n      justify-self: start;\n      padding-top: 0;\n    }\n  }\n"])), devices.mobile);
-var SignUpText = /*#__PURE__*/styled__default.p(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-body-2);\n  line-height: var(--line-height-body-2);\n  width: 60%;\n  margin: 0 auto;\n  height: 60px;\n  text-align: center;\n\n  @media ", " {\n    & {\n      width: 100%;\n      height: auto;\n      text-align: left;\n      font-size: 14px;\n      margin-bottom: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
-var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 3;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 9px;\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      align-items: start;\n      justify-self: start;\n      padding-top: 0;\n    }\n  }\n"])), devices.mobile);
+var _templateObject$D, _templateObject2$o, _templateObject3$h, _templateObject4$c, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$2;
+var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n  grid-template-rows: 100px;\n  gap: 0;\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content min-content;\n      gap: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
+var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2;\n  justify-self: center;\n  height: 100%;\n  border: 1px solid var(--base-color-white);\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      display: none;\n    }\n  }\n"])), devices.mobile);
+var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1;\n  padding-top: 9px;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      align-items: start;\n      justify-self: start;\n      padding-top: 0;\n    }\n  }\n"])), devices.mobile);
+var SignUpText = /*#__PURE__*/styled__default.p(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-body-2);\n  line-height: var(--line-height-body-2);\n  width: 60%;\n  margin: 0 auto;\n  height: 60px;\n  text-align: center;\n\n  @media ", " {\n    & {\n      width: 100%;\n      height: auto;\n      text-align: left;\n      font-size: 14px;\n      margin-bottom: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
+var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 3;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 9px;\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      align-items: start;\n      justify-self: start;\n      padding-top: 0;\n    }\n  }\n"])), devices.mobile);
 var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n  height: 60px;\n\n  @media ", " {\n    & {\n      height: auto;\n      margin-bottom: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
 var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-media-icon-height);\n  width: var(--footer-media-icon-width);\n"])));
 var TextLinkWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &&& {\n    font-family: var(--font-family-overline);\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    line-height: var(--line-height-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    text-transform: var(--text-transform-overline);\n  }\n"])));
@@ -4814,15 +5044,15 @@ var Footer = function Footer(_ref) {
   }, additionalInfo)))));
 };
 
-var _templateObject$D, _templateObject2$o, _templateObject3$h, _templateObject4$c, _templateObject5$7, _templateObject6$6;
+var _templateObject$E, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$8, _templateObject6$6;
 var LIST_ITEM_GAP = 32;
-var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  width: 100%;\n  top: 0;\n  border-bottom: ", ";\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
+var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  width: 100%;\n  top: 0;\n  border-bottom: ", ";\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
   var bottomBorder = _ref.bottomBorder;
   return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
 }, zIndexes.anchor);
-var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
-var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  gap: ", "px;\n  justify-content: ", ";\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  height: var(--anchor-tabs-height);\n  white-space: nowrap;\n  overflow: scroll;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scroll-behavior: smooth;\n\n  @media ", " {\n    background: linear-gradient(\n      135deg,\n      rgba(255, 255, 255, 1) 0%,\n      rgba(255, 255, 255, 0.48) 85%,\n      rgba(235, 235, 235, 0.4) 99%,\n      rgba(255, 255, 255, 0.39) 100%\n    );\n  }\n\n  @media ", " {\n    & {\n      width: ", ";\n    }\n  }\n"])), function (_ref2) {
+var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
+var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  gap: ", "px;\n  justify-content: ", ";\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  height: var(--anchor-tabs-height);\n  white-space: nowrap;\n  overflow: scroll;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scroll-behavior: smooth;\n\n  @media ", " {\n    background: linear-gradient(\n      135deg,\n      rgba(255, 255, 255, 1) 0%,\n      rgba(255, 255, 255, 0.48) 85%,\n      rgba(235, 235, 235, 0.4) 99%,\n      rgba(255, 255, 255, 0.39) 100%\n    );\n  }\n\n  @media ", " {\n    & {\n      width: ", ";\n    }\n  }\n"])), function (_ref2) {
   var tabsOverflow = _ref2.tabsOverflow;
   return tabsOverflow ? 'calc(100% - 74px)' : '100%';
 }, LIST_ITEM_GAP, function (_ref3) {
@@ -4833,7 +5063,7 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$c || (_templateO
       hasTwoArrows = _ref4.hasTwoArrows;
   return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
 });
-var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: var(--anchor-tabs-height);\n  background-color: var(--base-color-white);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n"])), function (_ref5) {
+var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: var(--anchor-tabs-height);\n  background-color: var(--base-color-white);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n"])), function (_ref5) {
   var fullWidth = _ref5.fullWidth;
   return fullWidth ? '74px' : '46px';
 });
@@ -5082,10 +5312,13 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   })) : null) : null))));
 };
 
-var _templateObject$E, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$8;
-var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n\n  .swiper-wrapper {\n    height: 100%;\n  }\n  .swiper-slide {\n    height: unset;\n  }\n\n  ", "\n\n  @media ", " {\n    ", "\n  }\n"])), function (_ref) {
-  var type = _ref.type,
-      imagesHeightDesktop = _ref.imagesHeightDesktop;
+var _templateObject$F, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$9;
+var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n\n  .swiper {\n    ", ";\n  }\n\n  .swiper-wrapper {\n    height: 100%;\n  }\n  .swiper-slide {\n    height: unset;\n  }\n\n  ", "\n\n  @media ", " {\n    ", "\n  }\n"])), function (_ref) {
+  var overflow = _ref.overflow;
+  return overflow ? "overflow: " + overflow : '';
+}, function (_ref2) {
+  var type = _ref2.type,
+      imagesHeightDesktop = _ref2.imagesHeightDesktop;
 
   if (type !== exports.CarouselType.Image) {
     var numberOfGaps = type === exports.CarouselType.LargeCard ? 4 : 3;
@@ -5097,10 +5330,10 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$E || (_te
   } else {
     return "\n      & {\n        .swiper-slide {\n          height: fit-content;\n          width: auto;\n          margin-right: var(--grid-column-gap);\n          -webkit-transform: translate3d(0, 0, 0);\n\n          > div {\n            height: calc(" + imagesHeightDesktop + "px + var(--line-height-body-2) + 12px);\n          }\n        }\n      }\n    ";
   }
-}, devices.mobile, function (_ref2) {
-  var active = _ref2.active,
-      type = _ref2.type,
-      imagesHeightDevice = _ref2.imagesHeightDevice;
+}, devices.mobile, function (_ref3) {
+  var active = _ref3.active,
+      type = _ref3.type,
+      imagesHeightDevice = _ref3.imagesHeightDevice;
 
   if (type !== exports.CarouselType.Image) {
     var gapsSpace = 'calc(var(--grid-column-gap) * 9)';
@@ -5115,10 +5348,10 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$E || (_te
     return "\n        &&& {\n          .swiper-slide > div{\n            height: calc(" + imagesHeightDevice + "px + var(--line-height-body-2) + 12px);\n          }\n        }";
   }
 });
-var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
-var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  user-select: text;\n\n  h4 {\n    padding: 0;\n    margin: 0;\n  }\n"])));
-var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
+var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
+var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  user-select: text;\n\n  h4 {\n    padding: 0;\n    margin: 0;\n  }\n"])));
+var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
 
 var Carousel = function Carousel(_ref) {
   var children = _ref.children,
@@ -5127,7 +5360,9 @@ var Carousel = function Carousel(_ref) {
       imagesHeightDesktop = _ref$imagesHeightDesk === void 0 ? 500 : _ref$imagesHeightDesk,
       _ref$imagesHeightDevi = _ref.imagesHeightDevice,
       imagesHeightDevice = _ref$imagesHeightDevi === void 0 ? 300 : _ref$imagesHeightDevi,
-      title = _ref.title;
+      title = _ref.title,
+      _ref$useOffset = _ref.useOffset,
+      useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
 
   var _useState = React.useState(),
       swiper = _useState[0],
@@ -5142,6 +5377,8 @@ var Carousel = function Carousel(_ref) {
       setLoop = _useState3[1];
 
   React.useEffect(function () {
+    if (!useOffset) return;
+
     var updateWindowDimensions = function updateWindowDimensions() {
       if (window.matchMedia(devices.mobile).matches) {
         setSlidesOffsetBefore(20); // Mobile margin grid
@@ -5156,7 +5393,10 @@ var Carousel = function Carousel(_ref) {
     updateWindowDimensions();
     return function () {
       window.removeEventListener('resize', updateWindowDimensions);
-
+    };
+  }, [useOffset]);
+  React.useEffect(function () {
+    return function () {
       if (swiper) {
         swiper.destroy();
       }
@@ -5188,20 +5428,21 @@ var Carousel = function Carousel(_ref) {
     active: loop,
     type: type,
     imagesHeightDevice: imagesHeightDevice,
-    imagesHeightDesktop: imagesHeightDesktop
+    imagesHeightDesktop: imagesHeightDesktop,
+    overflow: useOffset ? 'hidden' : 'visible'
   }, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(TitleGridItem, {
-    columnStartDesktop: 3,
+    columnStartDesktop: useOffset ? 3 : 1,
     columnSpanDesktop: 10,
     columnStartDevice: 2,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
+  }, title && /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
     "data-testid": "carousel-title-wrapper"
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 4
   }, title))), /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 14,
+    columnStartDesktop: useOffset ? 14 : 15,
     columnSpanDesktop: 2,
-    columnStartDevice: 12,
+    columnStartDevice: useOffset ? 12 : 13,
     columnSpanDevice: 2
   }, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
     "data-testid": "carousel-buttons-wrapper"
@@ -5220,7 +5461,8 @@ var Carousel = function Carousel(_ref) {
     loop: loop,
     loopedSlides: React__default.Children.count(children),
     onSwiper: onSwiper,
-    "data-testid": "carousel-swiper"
+    "data-testid": "carousel-swiper",
+    className: 'roh-carousel-swiper'
   }, React__default.Children.map(children, function (child) {
     return /*#__PURE__*/React__default.createElement(swiperReact_js.SwiperSlide, null, child);
   })))));
@@ -5235,9 +5477,9 @@ var Theme = function Theme(_ref) {
   }, children);
 };
 
-var _templateObject$F, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$9, _templateObject6$7, _templateObject7$5, _templateObject8$3, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
-var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n  user-select: none;\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
-var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  h4 {\n    margin: 0;\n    padding: 0;\n  }\n\n  h5 {\n    display: none;\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 12;\n      padding: 12px 0 12px var(--grid-margin);\n      min-height: 64px;\n      box-sizing: border-box;\n      width: 100%;\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: 40px;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: var(--line-height-altHeader-5);\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n      }\n    }\n  }\n"])), devices.tablet, function (_ref) {
+var _templateObject$G, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$a, _templateObject6$7, _templateObject7$5, _templateObject8$3, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
+var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n  user-select: none;\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
+var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  h4 {\n    margin: 0;\n    padding: 0;\n  }\n\n  h5 {\n    display: none;\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 12;\n      padding: 12px 0 12px var(--grid-margin);\n      min-height: 64px;\n      box-sizing: border-box;\n      width: 100%;\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: 40px;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: var(--line-height-altHeader-5);\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n      }\n    }\n  }\n"])), devices.tablet, function (_ref) {
   var theme = _ref.theme;
   return theme.fonts.mobile.sizes.altHeaders[5];
 }, function (_ref2) {
@@ -5247,9 +5489,9 @@ var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$q |
   var theme = _ref3.theme;
   return theme.fonts.mobile.letterSpacing.altHeaders[5];
 }, devices.mobile);
-var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 2 / 1 / 2 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 2 / 7;\n      padding: 0 12px 12px var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 3 / 1 / 4 / 15;\n      width: 100%;\n      padding: 0 20px;\n      margin: 24px 0;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n  width: 132px;\n  height: 36px;\n\n  @media ", " {\n    & {\n      margin-bottom: 16px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-bottom: 20px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n  h3 {\n    padding: 0;\n    margin: 0 0 8px 0;\n  }\n\n  h6 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      h3 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n\n      h6 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), devices.tablet, function (_ref4) {
+var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 2 / 1 / 2 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 2 / 7;\n      padding: 0 12px 12px var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 3 / 1 / 4 / 15;\n      width: 100%;\n      padding: 0 20px;\n      margin: 24px 0;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n  width: 132px;\n  height: 36px;\n\n  @media ", " {\n    & {\n      margin-bottom: 16px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-bottom: 20px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n  h3 {\n    padding: 0;\n    margin: 0 0 8px 0;\n  }\n\n  h6 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      h3 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n\n      h6 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), devices.tablet, function (_ref4) {
   var theme = _ref4.theme;
   return theme.fonts.mobile.sizes.headers[3];
 }, function (_ref5) {
@@ -5591,17 +5833,17 @@ var HighlightsStream = function HighlightsStream(_ref) {
   })));
 };
 
-var _templateObject$G, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject6$8, _templateObject7$6, _templateObject8$4, _templateObject9$2, _templateObject10$2;
-var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -1px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
+var _templateObject$H, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject6$8, _templateObject7$6, _templateObject8$4, _templateObject9$2, _templateObject10$2;
+var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -1px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
   var sticky = _ref.sticky;
   return sticky ? 'sticky' : 'initial';
 }, zIndexes.anchor);
-var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
-var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2 / span 15;\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  gap: 40px;\n  justify-content: space-between;\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 13;\n      gap: 20px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 12;\n    }\n  }\n"])), function (_ref2) {
+var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
+var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2 / span 15;\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  gap: 40px;\n  justify-content: space-between;\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 13;\n      gap: 20px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-column: 2 / span 12;\n    }\n  }\n"])), function (_ref2) {
   var title = _ref2.title;
   return title ? 'row' : 'row-reverse';
 }, devices.tablet, devices.mobile);
-var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  min-height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      min-height: 50px;\n    }\n  }\n"])), devices.mobile);
+var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  min-height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      min-height: 50px;\n    }\n  }\n"])), devices.mobile);
 var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n\n  a {\n    width: max-content;\n  }\n"])), devices.mobile);
 var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
 var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref3) {
@@ -5655,88 +5897,119 @@ 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 _templateObject$I, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$5;
+var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-lightgrey);\n  padding: 40px;\n\n  display: block;\n  position: relative;\n\n  @media ", " {\n    margin-top: 0;\n    padding: 40px 20px;\n  }\n"])), devices.tablet);
+var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-self: flex-end;\n  height: 15px;\n"])));
+var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  padding: 6px 8px;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  right: 20px;\n  top: 0;\n  width: auto;\n  margin: auto;\n  font-family: var(--font-family-header);\n  font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n  font-size: var(--font-size-overline-2);\n  line-height: 12px;\n  text-align: center;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.primary;
+}, exports.Colors.White);
+var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n"])));
+var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
+var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
+var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n  padding: 5px 0 8px 0;\n"])));
+var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--base-color-darkgrey);\n"])));
+
+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: 5,
+    level: 1
+  }, title), /*#__PURE__*/React__default.createElement(BodyText, {
+    level: 1
+  }, /*#__PURE__*/React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: description != null ? description : ''
+    }
+  })));
+};
 
-var loadLiveChatScript = function loadLiveChatScript(callback) {
-  var existingScript = document.getElementById(DIV_ID);
+// Set max. character length
+var setMaxCharLength = function setMaxCharLength(value, maxLength) {
+  return value.slice(0, maxLength);
+}; // Format price to contain £ if not already present
 
-  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 formatPrice = function formatPrice(value) {
+  if (Number.isNaN(Number(value))) return value != null ? value : '';
+  return "\xA3" + Number(value).toFixed(2);
+};
 
-    script.onload = function () {
-      if (callback) callback();
-    };
-  }
+var LENGTH_SMALL_TEXT = 19;
+var OFFER_TEXTS_LIMIT = 3;
 
-  if (existingScript && callback) callback();
-};
+var UpsellCard = function UpsellCard(_ref) {
+  var _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      subTitle = _ref.subTitle,
+      price = _ref.price,
+      promoPrice = _ref.promoPrice,
+      flag = _ref.flag,
+      offerTexts = _ref.offerTexts,
+      link = _ref.link,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
 
-var LiveChat = function LiveChat() {
-  // eslint-disable-next-line
-  var _React$useState = React.useState(false),
-      loaded = _React$useState[0],
-      setLoaded = _React$useState[1];
+  var truncate = function truncate(str, n) {
+    return str.length >= n ? str.slice(0, n) : str;
+  };
 
-  React.useEffect(function () {
-    loadLiveChatScript(function () {
-      setLoaded(true);
+  var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
+  return /*#__PURE__*/React__default.createElement(Theme, {
+    theme: theme
+  }, /*#__PURE__*/React__default.createElement(Wrapper$2, null, flag && /*#__PURE__*/React__default.createElement(PromoLabelWrapper, null, /*#__PURE__*/React__default.createElement(PromoLabel, null, setMaxCharLength(flag, 15))), /*#__PURE__*/React__default.createElement(TitleContainer$1, null, /*#__PURE__*/React__default.createElement(Subtitle, {
+    semanticLevel: 2,
+    level: 1
+  }, title), subTitle && /*#__PURE__*/React__default.createElement(Overline, {
+    semanticLevel: 3,
+    level: 1
+  }, subTitle), promoPrice ? /*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 4
+  }, formatPrice(price))), /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 4
+  }, formatPrice(promoPrice))) : /*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 4
+  }, 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$H, _templateObject2$s;
-var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__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$s || (_templateObject2$s = /*#__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$J;
+var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 60px 75px;\n  grid-template-columns: repeat(2, 1fr);\n  width: 100%;\n\n  @media ", " {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  @media ", " {\n    width: 100%;\n    padding-left: 0;\n    padding-right: 0;\n    grid-template-columns: 1fr;\n  }\n"])), devices.tablet, 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,
+      promoPrice: card.promoPrice,
+      flag: card.flag,
+      offerTexts: card.offerTexts,
+      link: card.link,
+      theme: card.theme
+    });
+  }));
 };
 
-var _templateObject$I, _templateObject2$t, _templateObject3$l, _templateObject4$g, _templateObject5$a;
-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$t || (_templateObject2$t = /*#__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$1 = /*#__PURE__*/styled__default.div(_templateObject4$g || (_templateObject4$g = /*#__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$K, _templateObject2$u, _templateObject3$n;
+var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: solid 4px;\n  border-color: ", ";\n  padding: 80px;\n\n  @media ", " {\n    & {\n      border-left: none;\n      border-right: none;\n      padding-top: 2.5em;\n      padding-left: 0;\n      padding-right: 0;\n      padding-bottom: 2.5em;\n    }\n  }\n\n  @media ", " {\n    & {\n      padding: 25px;\n      padding-top: 2.5em;\n    }\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.primary;
+}, devices.mobile, devices.tablet);
+var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  @media ", " {\n    margin-left: 1.5em;\n    margin-right: 1.5em;\n  }\n"])), devices.mobile);
+var TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 2.5em;\n  div > :first-child {\n    margin-top: 1.5em;\n  }\n\n  @media ", " {\n    margin-top: 0;\n    div > :first-child {\n      margin-top: 0.5em;\n    }\n  }\n\n  @media ", " {\n    margin-left: 1.5em;\n    margin-right: 1.5em;\n    & {\n      div > :first-child {\n        margin-top: 1em;\n      }\n    }\n  }\n"])), devices.tablet, devices.mobile);
+
+var _templateObject$L, _templateObject2$v, _templateObject3$o, _templateObject4$i, _templateObject5$c;
+var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
+var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
+var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__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$i || (_templateObject4$i = /*#__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$c || (_templateObject5$c = /*#__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,
@@ -5798,7 +6071,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
@@ -5817,8 +6090,8 @@ var Accordion = function Accordion(_ref) {
   }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
 };
 
-var _templateObject$J;
-var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$M;
+var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 
 var Accordions = function Accordions(_ref) {
   var _ref$items = _ref.items,
@@ -5838,13 +6111,13 @@ var Accordions = function Accordions(_ref) {
   }));
 };
 
-var _templateObject$K, _templateObject2$u, _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 _templateObject$N, _templateObject2$w, _templateObject3$p;
+var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__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$u || (_templateObject2$u = /*#__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 SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__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$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-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,
@@ -5881,35 +6154,35 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
   }))))));
 };
 
-var _templateObject$L, _templateObject2$v, _templateObject3$n, _templateObject4$h, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$1;
+var _templateObject$O, _templateObject2$x, _templateObject3$q, _templateObject4$j, _templateObject5$d, _templateObject6$a, _templateObject7$8, _templateObject8$6, _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$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
+var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
   var isCardClickable = _ref.isCardClickable;
   return isCardClickable ? 'pointer' : 'default';
 }, function (_ref2) {
   var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
   return !onlyShowButtonsOnHover ? "height: 100%;\n       display: flex;\n       flex-direction: column;\n       justify-content: space-between;  \n    " : '';
 });
-var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref3) {
+var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref3) {
   var lineColor = _ref3.lineColor,
       theme = _ref3.theme;
   if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
   return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
 }, zIndexes.contentOverlay);
-var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
-var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref4) {
+var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
+var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref4) {
   var fullWidth = _ref4.fullWidth;
   return fullWidth ? '0' : '20px';
 }, function (_ref5) {
   var fullWidth = _ref5.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 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 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 TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__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$a || (_templateObject6$a = /*#__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$1 = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__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$6 || (_templateObject8$6 = /*#__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 (_ref6) {
   var isVisible = _ref6.isVisible;
   return isVisible ? "visible" : 'hidden';
@@ -5938,7 +6211,7 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject12$1 ||
   var size = _ref11.size,
       primaryButtonTextLength = _ref11.primaryButtonTextLength,
       tertiaryButtonTextLength = _ref11.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      ";
@@ -5968,7 +6241,7 @@ var _excluded$f = ["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) {
@@ -6018,7 +6291,7 @@ var Card = function Card(_ref) {
       firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
       restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
 
-  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 || {},
@@ -6026,7 +6299,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) {
@@ -6085,11 +6358,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
     }
@@ -6104,9 +6377,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$M, _templateObject2$w;
-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$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
+var _templateObject$P, _templateObject2$y;
+var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__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$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
 
 var Cards = function Cards(_ref) {
   var cards = _ref.cards,
@@ -6149,18 +6422,18 @@ var Cards = function Cards(_ref) {
   }));
 };
 
-var _templateObject$N, _templateObject2$x, _templateObject3$o, _templateObject4$i, _templateObject5$c;
-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$2 = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__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$Q, _templateObject2$z, _templateObject3$r, _templateObject4$k, _templateObject5$e;
+var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__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$z || (_templateObject2$z = /*#__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$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__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$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__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$e || (_templateObject5$e = /*#__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) {
@@ -6189,7 +6462,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
@@ -6217,14 +6490,14 @@ var ContactCard = function ContactCard(_ref) {
   }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
 };
 
-var _templateObject$O, _templateObject2$y, _templateObject3$p, _templateObject4$j, _templateObject5$d;
-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$y || (_templateObject2$y = /*#__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) {
+var _templateObject$R, _templateObject2$A, _templateObject3$s, _templateObject4$l, _templateObject5$f;
+var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject$R || (_templateObject$R = /*#__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$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
+var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__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$j || (_templateObject4$j = /*#__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$l || (_templateObject4$l = /*#__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$f || (_templateObject5$f = /*#__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  ";
 });
 
@@ -6284,21 +6557,21 @@ var ContentSummary = function ContentSummary(_ref) {
   }), link.text)));
 };
 
-var _templateObject$P, _templateObject2$z, _templateObject3$q, _templateObject4$k, _templateObject5$e;
-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 _templateObject$S, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g;
+var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$S || (_templateObject$S = /*#__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$z || (_templateObject2$z = /*#__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$B || (_templateObject2$B = /*#__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$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 EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$k || (_templateObject4$k = /*#__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$m || (_templateObject4$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 EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$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  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
 
 var Editorial = function Editorial(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -6362,10 +6635,10 @@ var BackgroundColour;
   BackgroundColour["White"] = "white";
 })(BackgroundColour || (BackgroundColour = {}));
 
-var _templateObject$Q, _templateObject2$A, _templateObject3$r, _templateObject4$l;
-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$A || (_templateObject2$A = /*#__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) {
+var _templateObject$T, _templateObject2$C, _templateObject3$u, _templateObject4$n;
+var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$T || (_templateObject$T = /*#__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$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
+var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 32px 0;\n\n  ", "}\n"])), function (props) {
   if (!props.infoThemed) {
     return;
   } else {
@@ -6376,7 +6649,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$r || (
     }
   }
 });
-var InfoWrapper$1 = /*#__PURE__*/styled__default(Grid)(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: ", ";\n  background: ", "\n  }};\n"])), function (props) {
+var InfoWrapper$1 = /*#__PURE__*/styled__default(Grid)(_templateObject4$n || (_templateObject4$n = /*#__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 + ")";
@@ -6489,27 +6762,27 @@ var Information = function Information(_ref) {
   }))));
 };
 
-var _templateObject$R, _templateObject2$B, _templateObject3$s, _templateObject4$m, _templateObject5$f, _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 _templateObject$U, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$h, _templateObject6$b, _templateObject7$9, _templateObject8$7;
+var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__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$B || (_templateObject2$B = /*#__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 PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$D || (_templateObject2$D = /*#__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$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
   var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin-top: 42px;\n  ";
 }, devices.mobile);
-var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$m || (_templateObject4$m = /*#__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$o || (_templateObject4$o = /*#__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 LogoWrapper$2 = /*#__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"])));
+var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__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$2 = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
+var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
+var PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-family: var(--font-family-altHeader);\n  text-transform: var(--text-transform-altHeader);\n  word-break: var(--word-break-altHeader);\n"])));
 
 var _excluded$g = ["text"];
 
@@ -6587,9 +6860,9 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
 };
 
-var _templateObject$S, _templateObject2$C, _templateObject3$t, _templateObject4$n, _templateObject5$g, _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$C || (_templateObject2$C = /*#__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$V, _templateObject2$E, _templateObject3$w, _templateObject4$p, _templateObject5$i, _templateObject6$c, _templateObject7$a;
+var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__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$E || (_templateObject2$E = /*#__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) {
@@ -6602,7 +6875,7 @@ var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C
   var theme = _ref4.theme;
   return theme.fonts.mobile.lineHeights.headers[3];
 });
-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 HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__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) {
@@ -6615,19 +6888,19 @@ var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t |
   var theme = _ref8.theme;
   return theme.fonts.mobile.lineHeights.body[1];
 }, devices.mobile);
-var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__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$p || (_templateObject4$p = /*#__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$i || (_templateObject5$i = /*#__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);
-var MobileRotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div {\n    padding-top: 8px;\n  }\n\n  @media ", ", ", " {\n    display: none;\n  }\n\n  @media ", " {\n    .carousel-icon-wrapper-left,\n    .carousel-icon-wrapper-right {\n      background-color: transparent;\n\n      svg path {\n        fill: var(--base-color-lightgrey);\n      }\n    }\n\n    .carousel-icon-wrapper-left {\n      margin-right: 8px;\n    }\n  }\n\n  @media ", " {\n    grid-area: 1 / 2;\n    height: 56px;\n\n    div {\n      padding-top: 6px;\n    }\n  }\n\n  @media ", " {\n    grid-area: 1 / 13;\n    height: 80px;\n\n    div {\n      padding-top: 8px;\n    }\n  }\n"])), devices.desktop, devices.largeDesktop, devices.mobileAndTablet, devices.mobile, devices.tablet);
-var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 50px;\n  top: calc(50% - calc(var(--rotator-button-width) / 2));\n  z-index: 2;\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.mobileAndTablet);
+var MobileRotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div {\n    padding-top: 8px;\n  }\n\n  @media ", ", ", " {\n    display: none;\n  }\n\n  @media ", " {\n    .carousel-icon-wrapper-left,\n    .carousel-icon-wrapper-right {\n      background-color: transparent;\n\n      svg path {\n        fill: var(--base-color-lightgrey);\n      }\n    }\n\n    .carousel-icon-wrapper-left {\n      margin-right: 8px;\n    }\n  }\n\n  @media ", " {\n    grid-area: 1 / 2;\n    height: 56px;\n\n    div {\n      padding-top: 6px;\n    }\n  }\n\n  @media ", " {\n    grid-area: 1 / 13;\n    height: 80px;\n\n    div {\n      padding-top: 8px;\n    }\n  }\n"])), devices.desktop, devices.largeDesktop, devices.mobileAndTablet, devices.mobile, devices.tablet);
+var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 50px;\n  top: calc(50% - calc(var(--rotator-button-width) / 2));\n  z-index: 2;\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.mobileAndTablet);
 
 var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
   var title = _ref.title,
@@ -6712,15 +6985,15 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
   }))));
 };
 
-var _templateObject$T, _templateObject2$D, _templateObject3$u, _templateObject4$o, _templateObject5$h, _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$D || (_templateObject2$D = /*#__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$o || (_templateObject4$o = /*#__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$3 = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__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);
+var _templateObject$W, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$d, _templateObject7$b, _templateObject8$8;
+var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__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$F || (_templateObject2$F = /*#__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$x || (_templateObject3$x = /*#__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$q || (_templateObject4$q = /*#__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$3 = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
+var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__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$b || (_templateObject7$b = /*#__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$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 
 var _excluded$j = ["text"];
 
@@ -6785,21 +7058,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, "Scroll Down")) : null);
 };
 
-var _templateObject$U, _templateObject2$E, _templateObject3$v, _templateObject4$p, _templateObject5$i;
-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 _templateObject$X, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k;
+var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__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$E || (_templateObject2$E = /*#__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$G || (_templateObject2$G = /*#__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$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$p || (_templateObject4$p = /*#__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$y || (_templateObject3$y = /*#__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$r || (_templateObject4$r = /*#__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$k || (_templateObject5$k = /*#__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;
@@ -6830,8 +7103,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
   }))));
 };
 
-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 _templateObject$Y;
+var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
 
 var _excluded$k = ["link"];
 
@@ -6851,21 +7124,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
 };
 
-var BrandingStyle;
-
-(function (BrandingStyle) {
-  BrandingStyle["BlockText"] = "BlockText";
-  BrandingStyle["BodyText"] = "BodyText";
-  BrandingStyle["StreamLogo"] = "StreamLogo";
-  BrandingStyle["CinemaLogo"] = "CinemaLogo";
-})(BrandingStyle || (BrandingStyle = {}));
-
-var _templateObject$W, _templateObject2$F, _templateObject3$w, _templateObject5$j, _templateObject6$d, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject10$4;
-var BrandingTextBlock = /*#__PURE__*/styled__default.div(_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$F || (_templateObject2$F = /*#__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$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: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
-var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$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 _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject5$l, _templateObject6$e, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4;
+var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__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$H || (_templateObject2$H = /*#__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$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
+var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
+var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    max-width: 155px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\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;
   return invert ? theme.colors.white : theme.colors.primary;
@@ -6877,18 +7141,17 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
   var invert = _ref3.invert,
       theme = _ref3.theme;
   return invert ? theme.colors.black : theme.colors.white;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.primary === theme.colors.stream && "\n      color: " + theme.colors.stream + ";\n      background-color: " + theme.colors.white + ";\n    ";
 }, devices.mobile);
-var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  padding-left: 50px;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n  @media ", " {\n    width: fit-content;\n  }\n"])), devices.mobile, devices.tablet);
-var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  text-align: center;\n  padding: 0 2em;\n  @media ", " {\n    justify-content: center;\n  }\n"])), devices.mobile);
+var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  padding-left: 50px;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n  @media ", " {\n    width: fit-content;\n  }\n"])), devices.mobile, devices.tablet);
+var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  text-align: center;\n  padding: 0 2em;\n  @media ", " {\n    justify-content: center;\n  }\n"])), devices.mobile);
 var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  padding-right: 50px;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobile);
-var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref4) {
-  var invert = _ref4.invert,
-      theme = _ref4.theme;
-  return invert ? theme.colors.primary : theme.colors.white;
-}, function (_ref5) {
+var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
   var invert = _ref5.invert,
       theme = _ref5.theme;
-  return invert ? theme.colors.white : theme.colors.black;
+  return invert ? theme.colors.primary : theme.colors.white;
 }, function (_ref6) {
   var invert = _ref6.invert,
       theme = _ref6.theme;
@@ -6897,30 +7160,34 @@ var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_te
   var invert = _ref7.invert,
       theme = _ref7.theme;
   return invert ? theme.colors.white : theme.colors.black;
+}, function (_ref8) {
+  var invert = _ref8.invert,
+      theme = _ref8.theme;
+  return invert ? theme.colors.white : theme.colors.black;
 });
 
-var renderBranding = function renderBranding(brandingStyle, brandingText, invert) {
+var renderBranding = function renderBranding(brandingStyle, invert, brandingText) {
   var color = invert ? exports.Colors.Black : exports.Colors.White;
 
   switch (brandingStyle) {
-    case BrandingStyle.BlockText:
-      return /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
+    case 'BlockText':
+      return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
 
-    case BrandingStyle.BodyText:
-      return /*#__PURE__*/React__default.createElement(BrandingTextBody, {
+    case 'BodyText':
+      return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBody, {
         dangerouslySetInnerHTML: {
           __html: truncateHtmlString(brandingText, 65)
         }
       });
 
-    case BrandingStyle.StreamLogo:
+    case 'StreamLogo':
       return /*#__PURE__*/React__default.createElement(Logo, {
         color: color,
         fontSize: 12,
         productName: TextLogoProduct.Stream
       });
 
-    case BrandingStyle.CinemaLogo:
+    case 'CinemaLogo':
       return /*#__PURE__*/React__default.createElement(Logo, {
         color: color,
         fontSize: 12,
@@ -6934,16 +7201,16 @@ var renderBranding = function renderBranding(brandingStyle, brandingText, invert
 
 var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   var brandingStyle = _ref.brandingStyle,
-      brandingText = _ref.brandingText,
       _ref$invert = _ref.invert,
-      invert = _ref$invert === void 0 ? false : _ref$invert;
-  return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, brandingText, invert));
+      invert = _ref$invert === void 0 ? false : _ref$invert,
+      brandingText = _ref.brandingText;
+  return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText));
 };
 
 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) {
@@ -6959,7 +7226,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;
@@ -7099,7 +7366,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
       _ref4$invert = _ref4.invert,
       invert = _ref4$invert === void 0 ? false : _ref4$invert,
       _ref4$brandingStyle = _ref4.brandingStyle,
-      brandingStyle = _ref4$brandingStyle === void 0 ? BrandingStyle.BlockText : _ref4$brandingStyle,
+      brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
       brandingText = _ref4.brandingText;
 
   var _ref5 = link || {},
@@ -7129,7 +7396,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   })), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
     className: "page-heading-compact__background",
     invert: invert
-  }, (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
+  }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
     brandingStyle: brandingStyle,
     brandingText: brandingText,
     invert: invert
@@ -7142,15 +7409,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   }), linkText))));
 };
 
-var _templateObject$X, _templateObject2$G, _templateObject3$x, _templateObject4$q;
-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$G || (_templateObject2$G = /*#__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$_, _templateObject2$I, _templateObject3$A, _templateObject4$s;
+var MorePages = /*#__PURE__*/styled__default.span(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
+var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$I || (_templateObject2$I = /*#__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$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 PageNumber = /*#__PURE__*/styled__default(reactRouterDom.Link)(_templateObject3$A || (_templateObject3$A = /*#__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$q || (_templateObject4$q = /*#__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$s || (_templateObject4$s = /*#__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
@@ -7219,13 +7486,13 @@ var Pagination = function Pagination(_ref) {
   }))));
 };
 
-var _templateObject$Y, _templateObject2$H, _templateObject3$y, _templateObject4$r, _templateObject5$k, _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$H || (_templateObject2$H = /*#__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$r || (_templateObject4$r = /*#__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 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 _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$m, _templateObject6$f;
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$$ || (_templateObject$$ = /*#__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$J || (_templateObject2$J = /*#__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$B || (_templateObject3$B = /*#__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$t || (_templateObject4$t = /*#__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$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n"])));
+var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$f || (_templateObject6$f = /*#__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) {
   var person = _ref.person,
@@ -7276,14 +7543,14 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$Z, _templateObject2$I, _templateObject3$z, _templateObject4$s, _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$10, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$n, _templateObject6$g, _templateObject7$d, _templateObject8$a, _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$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 PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$10 || (_templateObject$10 = /*#__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) {
@@ -7293,8 +7560,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Z ||
   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$I || (_templateObject2$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 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 PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\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) {
@@ -7304,7 +7571,7 @@ var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$z || (
   var theme = _ref6.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__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$u || (_templateObject4$u = /*#__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) {
@@ -7332,13 +7599,13 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$s ||
 
   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$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref10) {
   var marginBottom = _ref10.marginBottom;
   return marginBottom + "px";
 });
-var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
-var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
-var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
+var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
+var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
+var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
 var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
 var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
 var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
@@ -7558,27 +7825,27 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$_, _templateObject2$J, _templateObject3$A, _templateObject4$t, _templateObject5$m, _templateObject6$g, _templateObject7$d;
+var _templateObject$11, _templateObject2$L, _templateObject3$D, _templateObject4$v, _templateObject5$o, _templateObject6$h, _templateObject7$e;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-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 PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__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$J || (_templateObject2$J = /*#__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$L || (_templateObject2$L = /*#__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$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 PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__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 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 PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__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$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__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;
 }, function (_ref6) {
@@ -7588,7 +7855,7 @@ var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$g ||
   var theme = _ref7.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref8) {
+var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref8) {
   var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
       primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
       _ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
@@ -7675,8 +7942,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$$;
-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 _templateObject$12;
+var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templateObject$12 = /*#__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,
@@ -7702,8 +7969,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description))));
 };
 
-var _templateObject$10, _templateObject2$K, _templateObject3$B, _templateObject4$u, _templateObject5$n, _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 _templateObject$13, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$p, _templateObject6$i, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$4;
+var stateStyles = /*#__PURE__*/styled.css(_templateObject$13 || (_templateObject$13 = /*#__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) {
@@ -7713,12 +7980,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$10 || (_templateObject
   var theme = _ref3.theme;
   return theme.colors.lightgrey;
 });
-var borderStyles = /*#__PURE__*/styled.css(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
+var borderStyles = /*#__PURE__*/styled.css(_templateObject2$M || (_templateObject2$M = /*#__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$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
+var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$w || (_templateObject4$w = /*#__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 {
@@ -7726,10 +7993,10 @@ 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);
-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);
+})(_templateObject5$p || (_templateObject5$p = /*#__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$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
+var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
+var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__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) {
   var theme = _ref6.theme,
       hover = _ref6.hover;
@@ -8076,7 +8343,7 @@ function Select(_ref3) {
 
     setSelectedValue(options[0]);
   }, [options, resetWhenOptionsUpdate]);
-  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"
@@ -8124,8 +8391,8 @@ function Select(_ref3) {
   }))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$11;
-var TextContainer$1 = /*#__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 _templateObject$14;
+var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__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: -20px;\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: 12px;\n    margin-right: 8px;\n  }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 });
@@ -8146,15 +8413,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$12, _templateObject2$L;
-var Wrapper$4 = /*#__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 _templateObject$15, _templateObject2$N;
+var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__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;
@@ -8164,7 +8431,7 @@ var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templat
       height = _ref2.height;
   return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
 });
-var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__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$N || (_templateObject2$N = /*#__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,
@@ -8193,7 +8460,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
@@ -8202,13 +8469,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
 };
 
-var _templateObject$13, _templateObject2$M, _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$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$16, _templateObject2$O, _templateObject3$F;
+var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
 });
-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 Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__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,
@@ -8232,8 +8499,217 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$14;
-var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-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 _templateObject$17, _templateObject2$P, _templateObject3$G, _templateObject4$x, _templateObject5$q;
+var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
+var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
+var SubtitleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div {\n    @media ", " {\n      font-size: 8px;\n    }\n  }\n"])), devices.mobile);
+var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      font-size: 12px;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
+
+var MiniCard = function MiniCard(_ref) {
+  var _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      subtitle = _ref.subtitle,
+      image = _ref.image,
+      _ref$imageAltText = _ref.imageAltText,
+      imageAltText = _ref$imageAltText === void 0 ? '' : _ref$imageAltText,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React__default.createElement(CardContainer$1, {
+    "data-testid": "minicardcontainer",
+    onClick: onClick
+  }, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDevice: 1,
+    columnSpanDevice: 3,
+    columnStartDesktop: 1,
+    columnSpanDesktop: 3
+  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: exports.AspectRatio['4:3']
+  }, /*#__PURE__*/React__default.createElement(StyledImage, {
+    src: image,
+    alt: imageAltText
+  }))), /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDevice: 4,
+    columnSpanDevice: 4,
+    columnStartDesktop: 4,
+    columnSpanDesktop: 4
+  }, /*#__PURE__*/React__default.createElement(ContentContainer$3, null, /*#__PURE__*/React__default.createElement(SubtitleWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
+    level: 2
+  }, subtitle)), /*#__PURE__*/React__default.createElement(TitleWrapper$3, null, /*#__PURE__*/React__default.createElement(Overline, {
+    level: 2
+  }, title)))));
+};
+
+var UpsellSection = function UpsellSection(_ref) {
+  var title = _ref.title,
+      richText = _ref.richText,
+      link = _ref.link,
+      upsellCards = _ref.upsellCards,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
+  var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
+    return _extends({}, card, {
+      theme: card.theme || 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: 4
+  }, title)), /*#__PURE__*/React__default.createElement(TextContainer, null, /*#__PURE__*/React__default.createElement(TextOnly, {
+    text: richText != null ? richText : '',
+    columnStartDesktop: 1,
+    columnSpanDesktop: 14,
+    columnStartDevice: 1,
+    columnSpanDevice: 14
+  }), link && /*#__PURE__*/React__default.createElement(TextLink, {
+    href: link.href
+  }, link.text)), /*#__PURE__*/React__default.createElement(UpsellCards, {
+    upsellCards: themedUpsellCards
+  })))));
+};
+
+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$18, _templateObject2$Q;
+var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__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 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$19, _templateObject3$H;
+var CarouselWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n\n  .swiper-wrapper {\n    height: 100%;\n  }\n  .swiper-slide {\n    height: unset;\n  }\n\n  display: flex;\n"])));
+var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
+
+var AsceticCarousel = function AsceticCarousel(_ref) {
+  var children = _ref.children;
+
+  var _useState = React.useState(),
+      swiper = _useState[0],
+      setSwiper = _useState[1];
+
+  React.useEffect(function () {
+    return function () {
+      if (swiper) {
+        swiper.destroy();
+      }
+    };
+  }, []);
+
+  var onNext = function onNext() {
+    if (swiper) {
+      swiper.slideNext();
+    }
+  };
+
+  var onPrev = function onPrev() {
+    if (swiper) {
+      swiper.slidePrev();
+    }
+  };
+
+  var onSwiper = function onSwiper(s) {
+    setSwiper(s);
+  };
+
+  return /*#__PURE__*/React__default.createElement(CarouselWrapper$2, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 1,
+    columnSpanDesktop: 16,
+    columnStartDevice: 1,
+    columnSpanDevice: 14
+  }, /*#__PURE__*/React__default.createElement(swiperReact_js.Swiper, {
+    slidesPerView: "auto",
+    loopedSlides: React__default.Children.count(children),
+    onSwiper: onSwiper,
+    "data-testid": "carousel-swiper",
+    className: 'roh-carousel-swiper',
+    loop: true
+  }, React__default.Children.map(children, function (child) {
+    return /*#__PURE__*/React__default.createElement(swiperReact_js.SwiperSlide, null, child);
+  })))), /*#__PURE__*/React__default.createElement(ButtonsWrapper$1, {
+    "data-testid": "carousel-buttons-wrapper"
+  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    onClickNext: onNext,
+    onClickPrev: onPrev
+  })));
+};
+
+var _templateObject$1a;
+var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-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) {
@@ -9155,6 +9631,7 @@ exports.Accordions = Accordions;
 exports.AltHeader = AltHeader;
 exports.AnchorTabBar = AnchorTabBar;
 exports.AnnouncementBanner = AnnouncementBanner;
+exports.AsceticCarousel = AsceticCarousel;
 exports.BodyText = BodyText;
 exports.Card = Card;
 exports.Cards = Cards;
@@ -9178,6 +9655,7 @@ exports.ImageAspectRatioWrapper = ImageAspectRatioWrapper;
 exports.ImageWithCaption = ImageWithCaption;
 exports.Information = Information;
 exports.LiveChat = LiveChat;
+exports.MiniCard = MiniCard;
 exports.Navigation = Navigation;
 exports.Overline = Overline;
 exports.PageHeadingCinema = PageHeadingCinema;
@@ -9202,6 +9680,7 @@ exports.SectionSplitter = SectionSplitter;
 exports.SectionTitle = SectionTitle;
 exports.Select = Select;
 exports.Sponsorship = Sponsorship;
+exports.Stepper = Component;
 exports.StickyBar = StickyBar;
 exports.StreamBadge = StreamBadge;
 exports.Subtitle = Subtitle;
@@ -9218,6 +9697,9 @@ exports.Tickbox = Tickbox;
 exports.Timer = Timer;
 exports.TitleWithCTA = TitleWithCTA;
 exports.TypeTags = TypeTags;
+exports.UpsellCard = UpsellCard;
+exports.UpsellSection = UpsellSection;
+exports.breakpoints = breakpoints;
 exports.devices = devices;
 exports.zIndexes = zIndexes;
 //# sourceMappingURL=chord.cjs.development.js.map