@royaloperahouse/harmonic 0.1.1-c → 0.1.1

package/dist/harmonic.esm.js

@@ -34,9 +34,50 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* TEMPORARY SCSS FILE - will relocate when CSS module issue is fixed */\n\n:root { \n  --font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n  --font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n  --harmonic-red: #F40B0B;\n  --harmonic-black: #000000;\n  --text-link-underline-offset: 4px;\n}\n\n.styles_em__v4FoO {\n  font-style: italic;\n}\n\n/* ~~~~~ Color Classes ~~~~~ */\n.styles_color-black__a05Fo {\n  color: var(--harmonic-black);\n}\n\n.styles_color-red__zwTZW {\n  color: var(--harmonic-red);\n}\n\n/* ~~~~~ Mobile Styles ~~~~~ */\n@media (max-width: 600px) {\n  /* Letter Spacing - Mobile */\n  .styles_display__VgnTB {\n    &.styles_large__vqVxY, &.styles_small__e7YDe {\n      letter-spacing: -1.5px;\n    }\n    &.styles_large__vqVxY.styles_serif__b-ZjM, &.styles_large__vqVxY.styles_em__v4FoO,\n    &.styles_small__e7YDe.styles_serif__b-ZjM, &.styles_small__e7YDe.styles_em__v4FoO {\n      letter-spacing: -0.5px;\n    }\n  }\n\n  .styles_header-small__W-GSS {\n    letter-spacing: -0.75px;\n  }\n\n  .styles_subtitle__os3DH.styles_small__e7YDe, .styles_bodycopy__uEx9r.styles_medium__WQPZj, .styles_bodycopy__uEx9r.styles_small__e7YDe {\n    letter-spacing: -0.2px;\n  }\n\n  .styles_overline__5xGDa.styles_small__e7YDe {\n    letter-spacing: -0.3px;\n  }\n\n  /* Typography Sizes - Mobile */\n  .styles_display__VgnTB {\n    &.styles_large__vqVxY { font-size: 38px; }\n    &.styles_small__e7YDe { font-size: 32px; }\n  }\n\n  .styles_header__UDH-H {\n    &.styles_large__vqVxY { font-size: 28px; line-height: 34px; }\n    &.styles_medium__WQPZj { font-size: 24px; line-height: 28px; }\n    &.styles_small__e7YDe { font-size: 20px; line-height: 26px; }\n  }\n\n  .styles_subtitle__os3DH {\n    &.styles_large__vqVxY { font-size: 17px; line-height: 24px; }\n    &.styles_small__e7YDe { font-size: 14px; line-height: 20px; }\n  }\n\n  .styles_bodycopy__uEx9r {\n    &.styles_large__vqVxY { font-size: 17px; line-height: 24px; }\n    &.styles_medium__WQPZj { font-size: 14px; line-height: 20px; }\n    &.styles_small__e7YDe { font-size: 11px; line-height: 16px; }\n  }\n\n  .styles_overline__5xGDa {\n    &.styles_large__vqVxY { font-size: 14px; line-height: 17px; }\n    &.styles_small__e7YDe { font-size: 12px; line-height: 14px; }\n  }\n\n  .styles_captiontext__-TA6x, .styles_navigationtext__qnnIo, .styles_textlinkharmonic__S77lE {\n    font-size: 14px;\n    line-height: 17px;\n  }\n}\n\n/* ~~~~~ Desktop Styles ~~~~~ */\n.styles_display__VgnTB {\n  font-family: var(--font-family-sans);\n  &.styles_large__vqVxY {\n    font-size: 96px;\n    letter-spacing: -5px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 68px;\n    letter-spacing: -3px;\n    font-weight: 500;\n  }\n\n  &.styles_serif__b-ZjM, &.styles_em__v4FoO {\n    font-family: var(--font-family-serif);\n    font-weight: 500;\n  }\n}\n\n.styles_header__UDH-H {\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n\n  &.styles_large__vqVxY {\n    font-size: 44px;\n    line-height: 48px;\n    letter-spacing: -1.5px;\n  }\n\n  &.styles_medium__WQPZj {\n    font-size: 34px;\n    line-height: 40px;\n    letter-spacing: -1.5px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 26px;\n    line-height: 32px;\n    letter-spacing: -0.5px;\n  }\n\n  &.styles_serif__b-ZjM, &.styles_em__v4FoO {\n    font-family: var(--font-family-serif);\n    font-weight: 500;\n  }\n}\n\n/* Subtitle */\n.styles_subtitle__os3DH {\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n\n  &.styles_large__vqVxY { font-size: 19px; line-height: 26px; }\n  &.styles_small__e7YDe { font-size: 17px; line-height: 24px; }\n}\n\n/* Body Copy */\n.styles_bodycopy__uEx9r {\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n\n  &.styles_large__vqVxY { font-size: 19px; line-height: 26px; }\n  &.styles_medium__WQPZj { font-size: 17px; line-height: 24px; }\n  &.styles_small__e7YDe { font-size: 14px; line-height: 20px; }\n}\n\n/* Overline */\n.styles_overline__5xGDa {\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n  text-transform: uppercase;\n\n  &.styles_large__vqVxY { font-size: 14px; line-height: 18px; letter-spacing: -0.3px; }\n  &.styles_small__e7YDe { font-size: 12px; line-height: 14px; letter-spacing: -0.2px; }\n}\n\n/* Button Text */\n.styles_buttontext__UPumF {\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n/* Caption Text */\n.styles_captiontext__-TA6x {\n  font-size: 17px;\n  font-weight: 400;\n  font-style: italic;\n  line-height: 24px;\n}\n\n/* Navigation Text */\n.styles_navigationtext__qnnIo {\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  font-weight: 500;\n  text-transform: uppercase;\n  line-height: 17px;\n}\n\n/* Text Link */\n.styles_textlinkharmonic__S77lE {\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n  text-transform: uppercase;\n  font-size: 17px;\n  line-height: 14px;\n  border-bottom: solid 1px;\n  width: -moz-fit-content;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n}\n";
+var css_248z = "/* Global Styles for Harmonic CSS components */\n:root { \n    --font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n    --harmonic-red: #F40B0B;\n    --harmonic-black: #000000;\n    --text-link-underline-offset: 4px;\n  }\n\n\n/* TODO: store breakpoints here for use in css components */  \n/* export const breakpoints = {\n    xs: 320,\n    sm: 700,\n    md: 1140,\n    ml: 1280,\n    lg: 1400,\n  }; */";
 styleInject(css_248z);
 
+var css_248z$1 = "/* ~~~~~ General Styling Classes ~~~~~ */\n  .styles_color-black__a05Fo {\n    color: var(--harmonic-black);\n  }\n  \n  .styles_color-red__zwTZW {\n    color: var(--harmonic-red);\n  }\n\n  .styles_em__v4FoO {\n    font-style: italic;\n  }\n/* ~~~ */\n\n/* Display Headers */\n.styles_display__VgnTB {\n  font-family: var(--font-family-sans);\n\n  &.styles_large__vqVxY {\n    font-size: 96px;\n    letter-spacing: -5px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 68px;\n    letter-spacing: -3px;\n    font-weight: 500;\n  }\n\n  &.styles_serif__b-ZjM, &.styles_em__v4FoO {\n    font-family: var(--font-family-serif);\n    font-weight: 500;\n  }\n\n  @media (max-width: 600px) {\n    &.styles_large__vqVxY {\n      font-size: 38px;\n      letter-spacing: -1.5px;  \n    }\n    \n    &.styles_small__e7YDe {\n      font-size: 32px;\n      letter-spacing: -1.5px;\n    }\n\n    &.styles_large__vqVxY.styles_serif__b-ZjM, \n    &.styles_large__vqVxY.styles_em__v4FoO,\n    &.styles_small__e7YDe.styles_serif__b-ZjM,\n    &.styles_small__e7YDe.styles_em__v4FoO {\n      letter-spacing: -0.5px;\n    }\n  }\n}\n\n/* Headers */\n.styles_header__UDH-H {\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n\n  &.styles_large__vqVxY {\n    font-size: 44px;\n    line-height: 48px;\n    letter-spacing: -1.5px;\n  }\n\n  &.styles_medium__WQPZj {\n    font-size: 34px;\n    line-height: 40px;\n    letter-spacing: -1.5px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 26px;\n    line-height: 32px;\n    letter-spacing: -0.5px;\n  }\n\n  &.styles_serif__b-ZjM, &.styles_em__v4FoO {\n    font-family: var(--font-family-serif);\n    font-weight: 500;\n  }\n\n  @media (max-width: 600px) {\n    &.styles_large__vqVxY {\n      font-size: 28px;\n      letter-spacing: -1.5px;\n      line-height: 34px;\n    }\n    \n    &.styles_medium__WQPZj {\n      font-size: 24px;\n      letter-spacing: -1px;\n      line-height: 28px;\n    }\n    \n    &.styles_small__e7YDe {\n      font-size: 20px;\n      letter-spacing: -0.75px;\n      line-height: 26px;\n    }\n  }\n}\n\n/* Subtitle */\n.styles_subtitle__os3DH {\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n\n  &.styles_large__vqVxY {\n    font-size: 19px;\n    line-height: 26px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 17px;\n    line-height: 24px;\n  }\n\n  @media (max-width: 600px) {\n    &.styles_large__vqVxY {\n      font-size: 17px;\n      line-height: 24px;\n    }\n    \n    &.styles_small__e7YDe {\n      font-size: 14px;\n      letter-spacing: -0.2px;\n      line-height: 20px;\n    }\n  }\n}\n\n/* Body Copy */\n.styles_bodycopy__uEx9r {\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n  letter-spacing: -0.5px;\n\n  &.styles_large__vqVxY {\n    font-size: 19px;\n    line-height: 26px;\n  }\n\n  &.styles_medium__WQPZj {\n    font-size: 17px;\n    line-height: 24px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  @media (max-width: 600px) {\n    &.styles_large__vqVxY {\n      font-size: 17px;\n      line-height: 24px;\n    }\n    \n    &.styles_medium__WQPZj {\n      font-size: 14px;\n      letter-spacing: -0.2px;\n      line-height: 20px;\n    }\n    \n    &.styles_small__e7YDe {\n      font-size: 11px;\n      letter-spacing: -0.2px;\n      line-height: 16px;\n    }\n  }\n}\n\n/* Overline */\n.styles_overline__5xGDa {\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n  text-transform: uppercase;\n\n  &.styles_large__vqVxY { font-size: 14px; line-height: 18px; letter-spacing: 0.3px; }\n  &.styles_small__e7YDe { font-size: 12px; line-height: 14px; letter-spacing: 0.2px; }\n\n  @media (max-width: 600px) {\n    &.styles_large__vqVxY {\n      line-height: 17px;\n    }\n    \n    &.styles_small__e7YDe {\n      letter-spacing: 0.3px;\n      line-height: 14px;\n    }\n  }\n}\n\n/* Button Text */\n.styles_buttontext__UPumF {\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n/* Caption Text */\n.styles_captiontext__-TA6x {\n  font-size: 17px;\n  font-weight: 400;\n  font-style: italic;\n  line-height: 24px;\n\n  @media (max-width: 600px) {\n    font-size: 14px;\n    line-height: 17px;\n  }    \n}\n\n/* Navigation Text */\n.styles_navigationtext__qnnIo {\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  line-height: 17px;\n}";
+styleInject(css_248z$1);
+
+// eslint-disable-next-line no-shadow
+var Colors;
+(function (Colors) {
+  Colors["White"] = "white";
+  Colors["Black"] = "black";
+  Colors["DarkGrey"] = "darkgrey";
+  Colors["MidGrey"] = "midgrey";
+  Colors["LightGrey"] = "lightgrey";
+  Colors["Trasparent"] = "transparent";
+  Colors["ErrorState"] = "errorstate";
+  Colors["MediumState"] = "mediumstate";
+  Colors["GoodState"] = "goodstate";
+  Colors["Primary"] = "primary";
+  Colors["Core"] = "core";
+  Colors["Stream"] = "stream";
+  Colors["Cinema"] = "cinema";
+})(Colors || (Colors = {}));
+// eslint-disable-next-line no-shadow
+var ThemeType;
+(function (ThemeType) {
+  ThemeType["Core"] = "core";
+  ThemeType["Stream"] = "stream";
+  ThemeType["Cinema"] = "cinema";
+  ThemeType["Schools"] = "schools";
+})(ThemeType || (ThemeType = {}));
+// eslint-disable-next-line no-shadow
+var LinkTarget;
+(function (LinkTarget) {
+  /**
+   * Opens the link in the same frame or tab as the current page.
+   */
+  LinkTarget["Self"] = "_self";
+  /**
+   * Opens the link in a new browser tab or window, depending on the browser settings.
+   */
+  LinkTarget["Blank"] = "_blank";
+})(LinkTarget || (LinkTarget = {}));
+
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
     var i = n[a](c),
@@ -385,31 +426,258 @@ function _taggedTemplateLiteralLoose(e, t) {
   return t || (t = e.slice(0)), e.raw = t, e;
 }
 
-var colors = {
-  core: '#C8102E',
-  stream: '#1866DC',
-  cinema: '#1A1A1A'
+var _templateObject;
+var BadgeWrapper = /*#__PURE__*/styled.svg(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: auto;\n\n  g,\n  path {\n    fill: var(--base-color-", ");\n  }\n"])), function (_ref) {
+  var fillColor = _ref.fillColor;
+  return fillColor;
+});
+
+/* eslint-disable max-len */
+var StreamBadge = function StreamBadge(_ref) {
+  var _ref$fillColor = _ref.fillColor,
+    fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$invert = _ref.invert,
+    invert = _ref$invert === void 0 ? false : _ref$invert;
+  var colour = invert ? Colors.Black : fillColor;
+  return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
+    fillColor: colour,
+    width: "100%",
+    height: "100%",
+    viewBox: "110 450 865 200",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Royal Ballet & Opera - Stream"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M416.81,485.21c0-9.38-6.6-14.94-18.59-14.94h-23.1v60.79h22.84c13.2,0,20.58-7.12,20.58-17.97,0-7.3-4.86-13.11-13.46-14.07,7.9-1.13,11.73-7.47,11.73-13.8ZM389.28,481.3h5.47c5.47,0,7.64,2.69,7.64,6.51s-2.17,6.51-7.73,6.51h-5.38v-13.03ZM395.79,519.59h-6.51v-14.59h6.42c4.95,0,8.43,2.69,8.43,7.29s-3.39,7.29-8.34,7.29Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M435.74,518.9h19.19l3.73,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76l3.73-12.16ZM445.29,487.55l5.82,18.85h-11.64l5.82-18.85Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M774.06,500.66c0-18.15-13.89-31.7-32.56-31.7s-32.56,13.54-32.56,31.7,13.98,31.7,32.56,31.7,32.56-13.55,32.56-31.7ZM723.44,500.66c0-10.59,7.81-18.58,18.06-18.58s18.06,7.99,18.06,18.58-7.73,18.58-18.06,18.58-18.06-7.99-18.06-18.58Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "511.38 470.27 511.38 531.06 542.64 531.06 542.64 518.38 525.53 518.38 525.53 470.27 511.38 470.27",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "610.2 531.06 610.2 482.95 623.83 482.95 623.83 470.27 582.41 470.27 582.41 482.95 596.04 482.95 596.04 531.06 610.2 531.06",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "578.59 482.95 578.59 470.27 546.46 470.27 546.46 531.06 578.59 531.06 578.59 518.38 560.61 518.38 560.61 506.74 575.03 506.74 575.03 494.06 560.61 494.06 560.61 482.95 578.59 482.95",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "475.86 470.27 475.86 531.06 507.12 531.06 507.12 518.38 490.01 518.38 490.01 470.27 475.86 470.27",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "324.76 470.27 324.76 531.06 356.02 531.06 356.02 518.38 338.92 518.38 338.92 470.27 324.76 470.27",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M800.98,508.48c12.33,0,20.58-7.99,20.58-19.11s-8.25-19.1-20.58-19.1h-23.19v60.79h14.16v-22.58h9.03ZM791.95,481.91h6.42c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56h-6.42v-15.02Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M923.95,470.27l-19.45,57.31-11.03-20.75c7.12-2.95,11.46-9.38,11.46-17.45,0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.58h3.56l11.55,22.58h27.62l3.73-12.16h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85ZM881.74,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56ZM925.51,506.39l5.82-18.85,5.82,18.85h-11.64Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M636.25,511c0,12.24,9.38,21.36,22.49,21.36,7.21,0,13.2-2.78,18.24-7.38l4.86,6.08h17.8l-13.37-16.59,9.81-14.33-10.85-7.47-7.64,11.12-16.85-20.84h18.93v-12.68h-36.64v12.68l6.68,8.25c-8.94,4.34-13.46,11.46-13.46,19.8ZM657.61,501.01l11.29,14.07c-2.26,2.34-5.21,4.17-9.03,4.17-5.64,0-9.21-4-9.21-8.77,0-4.26,2.87-7.81,6.95-9.46Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M176.87,529.41c-9.38-5.9-17.02-14.16-22.06-23.01,6.6-3.04,10.6-9.29,10.6-17.02,0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.84h5.13c6.16,12.68,16.06,24.49,27.87,31.78h0l8.08-10.59ZM142.23,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M284.56,518.9h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76l3.73-12.16ZM294.11,487.55l5.82,18.85h-11.64l5.82-18.85Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M201.1,468.97c-18.58,0-32.56,13.54-32.56,31.7s13.98,31.7,32.56,31.7,32.56-13.55,32.56-31.7-13.89-31.7-32.56-31.7ZM201.1,519.25c-10.25,0-18.06-7.99-18.06-18.58s7.81-18.58,18.06-18.58,18.06,7.99,18.06,18.58-7.73,18.58-18.06,18.58Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "254.42 490.41 242.44 470.27 226.37 470.27 247.3 504.92 247.3 531.06 261.46 531.06 261.46 504.74 282.3 470.27 266.32 470.27 254.42 490.41",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "857.34 482.95 857.34 470.27 825.21 470.27 825.21 531.06 857.34 531.06 857.34 518.38 839.36 518.38 839.36 506.74 853.78 506.74 853.78 494.06 839.36 494.06 839.36 482.95 857.34 482.95",
+    "stroke-width": "0"
+  })), align === 'left' && (/*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M151.07,588.98c.36-1.96.53-3.12.53-5.25,0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88c0,7.83,8.19,9.17,15.22,11.84,7.21,2.76,16.02,6.41,16.02,17.98s-9.08,18.16-20.47,18.16-20.47-6.85-20.47-18.16c0-2.58.53-4.54,1.07-5.87l7.92-.45c-.62,2.05-.98,4.01-.98,6.32,0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04c0-8.19-8.99-10.24-14.95-12.37-8.37-3.03-16.29-6.59-16.29-17.62s8.63-16.82,18.69-16.82,18.69,6.32,18.69,16.82c0,1.69-.27,3.74-.62,4.9l-7.92.53Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M184,630.37v-55.18h-16.91v-7.12h41.83v7.12h-16.91v55.18h-8.01Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M249.5,630.37c-1.69-2.58-1.33-11.04-1.6-16.2-.18-4.18-.98-6.32-2.49-7.83-1.6-1.51-4.18-2.22-7.48-2.22h-10.68v26.26h-8.01v-62.3h20.56c6.59,0,10.68,1.87,13.71,4.89,3.2,3.2,5.34,7.74,5.34,12.91,0,7.3-5.16,14.42-14.15,15.04,6.41.71,10.5,4.9,11.04,12.82l.36,5.52c.27,3.74.36,6.14.8,7.92.27,1.07.8,2.31,1.96,2.85v.36h-9.35ZM239.09,596.99c4.63,0,7.03-1.07,8.72-2.85,1.87-1.96,3.03-4.9,3.03-8.01s-1.16-5.96-3.03-7.92c-1.69-1.78-4.09-3.03-8.72-3.03h-11.84v21.81h11.84Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M271.93,630.37v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12h-35.16Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M353.01,630.37l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3h-8.19ZM338.5,584.53c-.89-2.76-1.16-3.92-1.42-5.16-.27,1.25-.53,2.4-1.42,5.16l-7.57,24.48h18.07l-7.65-24.48Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M416.55,630.37v-37.83c0-2.22,0-4.09.09-6.23-.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72c-.98-2.31-1.42-3.65-2.23-6.23.09,2.14.09,4.01.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07c1.25,3.03,1.69,4.18,2.67,6.76.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3h-7.92Z",
+    "stroke-width": "0"
+  }))), align === 'center' && (/*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M401.56,585.29c.36-1.96.53-3.12.53-5.25,0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88c0,7.83,8.19,9.17,15.22,11.84,7.21,2.76,16.02,6.41,16.02,17.98s-9.08,18.16-20.47,18.16-20.47-6.85-20.47-18.16c0-2.58.53-4.54,1.07-5.87l7.92-.45c-.62,2.05-.98,4.01-.98,6.32,0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04c0-8.19-8.99-10.24-14.95-12.37-8.37-3.03-16.29-6.59-16.29-17.62s8.63-16.82,18.69-16.82,18.69,6.32,18.69,16.82c0,1.69-.27,3.74-.62,4.9l-7.92.53Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M434.49,626.68v-55.18h-16.91v-7.12h41.83v7.12h-16.91v55.18h-8.01Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M500,626.68c-1.69-2.58-1.33-11.04-1.6-16.2-.18-4.18-.98-6.32-2.49-7.83-1.6-1.51-4.18-2.22-7.48-2.22h-10.68v26.26h-8.01v-62.3h20.56c6.59,0,10.68,1.87,13.71,4.89,3.2,3.2,5.34,7.74,5.34,12.91,0,7.3-5.16,14.42-14.15,15.04,6.41.71,10.5,4.9,11.04,12.82l.36,5.52c.27,3.74.36,6.14.8,7.92.27,1.07.8,2.31,1.96,2.85v.36h-9.35ZM489.58,593.3c4.63,0,7.03-1.07,8.72-2.85,1.87-1.96,3.03-4.9,3.03-8.01s-1.16-5.96-3.03-7.92c-1.69-1.78-4.09-3.03-8.72-3.03h-11.84v21.81h11.84Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M522.42,626.68v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12h-35.16Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M603.5,626.68l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3h-8.19ZM588.99,580.84c-.89-2.76-1.16-3.92-1.42-5.16-.27,1.25-.53,2.4-1.42,5.16l-7.57,24.48h18.07l-7.65-24.48Z",
+    "stroke-width": "0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M667.05,626.68v-37.83c0-2.22,0-4.09.09-6.23-.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72c-.98-2.31-1.42-3.65-2.23-6.23.09,2.14.09,4.01.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07c1.25,3.03,1.69,4.18,2.67,6.76.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3h-7.92Z",
+    "stroke-width": "0"
+  }))));
 };
-var commonColors = {
-  black: '#1A1A1A',
-  white: '#FFFFFF',
-  darkgrey: '#727272',
-  midgrey: '#B2B2B2',
-  lightgrey: '#F0F0F0',
-  error: '#C8102E',
-  medium: '#D79233',
-  good: '#4EAA33',
-  progress: '#1866DC',
-  navigation: '#C8102E',
-  lemonChiffon: '#fffbbe',
-  lapisLazuli: '#0060a0',
-  blue: '#1866DC',
-  red: '#C8102E'
+
+/* eslint-disable max-len */
+var CinemaBadge = function CinemaBadge(_ref) {
+  var _ref$fillColor = _ref.fillColor,
+    fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$invert = _ref.invert,
+    invert = _ref$invert === void 0 ? false : _ref$invert;
+  var colour = invert ? Colors.Black : fillColor;
+  return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
+    fillColor: colour,
+    width: "100%",
+    height: "100%",
+    viewBox: "110 450 865 200",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Royal Ballet & Opera - Cinema"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M416.26,485.21c0-9.38-6.6-14.94-18.59-14.94h-23.1v60.79h22.84c13.2,0,20.58-7.12,20.58-17.97\n\t\t\t\tc0-7.3-4.86-13.11-13.46-14.07C412.43,497.88,416.26,491.54,416.26,485.21z M388.73,481.3h5.47c5.47,0,7.64,2.69,7.64,6.51\n\t\t\t\tc0,3.82-2.17,6.51-7.73,6.51h-5.38V481.3z M395.24,519.59h-6.51v-14.59h6.42c4.95,0,8.43,2.69,8.43,7.29\n\t\t\t\tC403.58,516.81,400.19,519.59,395.24,519.59z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M773.51,500.66c0-18.15-13.89-31.7-32.56-31.7c-18.58,0-32.56,13.54-32.56,31.7\n\t\t\t\tc0,18.15,13.98,31.7,32.56,31.7C759.61,532.36,773.51,518.81,773.51,500.66z M722.88,500.66c0-10.59,7.81-18.58,18.06-18.58\n\t\t\t\tc10.33,0,18.06,7.99,18.06,18.58c0,10.59-7.73,18.58-18.06,18.58C730.7,519.25,722.88,511.26,722.88,500.66z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M435.19,518.9h19.19l3.73,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76L435.19,518.9z\n\t\t\t\t M444.74,487.55l5.82,18.85h-11.64L444.74,487.55z"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "475.31,470.27 475.31,531.06 506.57,531.06 506.57,518.38 489.46,518.38 489.46,470.27"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "609.65,531.06 609.65,482.95 623.28,482.95 623.28,470.27 581.86,470.27 581.86,482.95 \n\t\t\t\t595.49,482.95 595.49,531.06"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "578.03,482.95 578.03,470.27 545.91,470.27 545.91,531.06 578.03,531.06 578.03,518.38 \n\t\t\t\t560.06,518.38 560.06,506.74 574.47,506.74 574.47,494.06 560.06,494.06 560.06,482.95"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "324.21,470.27 324.21,531.06 355.47,531.06 355.47,518.38 338.36,518.38 338.36,470.27"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "510.82,470.27 510.82,531.06 542.09,531.06 542.09,518.38 524.98,518.38 524.98,470.27"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M284,518.9h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76L284,518.9z M293.55,487.55\n\t\t\t\tl5.82,18.85h-11.64L293.55,487.55z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M635.7,511c0,12.24,9.38,21.36,22.49,21.36c7.21,0,13.2-2.78,18.24-7.38l4.86,6.08h17.8l-13.37-16.59\n\t\t\t\tl9.81-14.33l-10.85-7.47l-7.64,11.12l-16.85-20.84h18.93v-12.68h-36.64v12.68l6.68,8.25C640.21,495.54,635.7,502.66,635.7,511z\n\t\t\t\t M657.06,501.01l11.29,14.07c-2.26,2.34-5.21,4.17-9.03,4.17c-5.64,0-9.21-4-9.21-8.77\n\t\t\t\tC650.11,506.22,652.98,502.66,657.06,501.01z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M176.32,529.41c-9.38-5.9-17.02-14.16-22.06-23.01c6.6-3.04,10.6-9.29,10.6-17.02\n\t\t\t\tc0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.84h5.13c6.16,12.68,16.06,24.49,27.87,31.78h0L176.32,529.41z\n\t\t\t\t M141.67,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47C150.36,493.72,147.93,496.93,141.67,496.93z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M923.39,470.27l-19.45,57.31l-11.03-20.75c7.12-2.95,11.46-9.38,11.46-17.45\n\t\t\t\tc0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.58h3.56l11.55,22.58h27.62l3.73-12.16h19.19l3.74,12.16h14.76\n\t\t\t\tl-20.67-60.79H923.39z M881.19,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47C889.87,493.72,887.44,496.93,881.19,496.93z\n\t\t\t\t M924.95,506.39l5.82-18.85l5.82,18.85H924.95z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M800.43,508.48c12.33,0,20.58-7.99,20.58-19.11c0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.16v-22.58\n\t\t\t\tH800.43z M791.4,481.91h6.42c6.25,0,8.68,3.21,8.68,7.47c0,4.34-2.43,7.56-8.68,7.56h-6.42V481.91z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M200.55,468.97c-18.58,0-32.56,13.54-32.56,31.7c0,18.15,13.98,31.7,32.56,31.7\n\t\t\t\tc18.67,0,32.56-13.55,32.56-31.7C233.11,482.51,219.22,468.97,200.55,468.97z M200.55,519.25c-10.25,0-18.06-7.99-18.06-18.58\n\t\t\t\tc0-10.59,7.81-18.58,18.06-18.58c10.33,0,18.06,7.99,18.06,18.58C218.61,511.26,210.88,519.25,200.55,519.25z"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "253.87,490.41 241.89,470.27 225.82,470.27 246.75,504.92 246.75,531.06 260.9,531.06 \n\t\t\t\t260.9,504.74 281.74,470.27 265.76,470.27"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    points: "856.79,482.95 856.79,470.27 824.66,470.27 824.66,531.06 856.79,531.06 856.79,518.38 \n\t\t\t\t838.81,518.38 838.81,506.74 853.23,506.74 853.23,494.06 838.81,494.06 838.81,482.95"
+  }))), align === 'left' && (/*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M121.69,630.37v-62.3h8.01v62.3H121.69z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M179.27,630.37l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.33,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H179.27z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M266.85,608.12c0,5.79-1.25,10.86-3.92,14.86c-3.83,5.88-9.97,8.72-17.18,8.72c-8.1,0-13.8-3.56-17.44-8.63\n\t\t\tc-4.81-6.59-6.41-15.75-6.41-23.85c0.09-14.86,5.79-32.49,23.94-32.49c11.48,0,19.23,8.63,19.23,19.05c0,1.07-0.09,2.49-0.36,3.65\n\t\t\tl-7.92,0.45c0.18-0.98,0.27-2.14,0.27-3.38c0-6.85-4.01-12.64-11.21-12.64c-12.37,0-15.93,14.6-15.93,25.37\n\t\t\tc0,5.16,0.8,12.28,3.47,17.36c2.49,4.72,6.68,8.01,12.37,8.01c9.43,0,12.82-7.48,13.17-16.91L266.85,608.12z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M278.95,630.37v-62.3h8.01v62.3H278.95z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M336.53,630.37l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.34,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H336.53z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M360.74,630.37v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12H360.74z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M453.75,630.37v-37.83c0-2.22,0-4.09,0.09-6.23c-0.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72\n\t\t\tc-0.98-2.31-1.42-3.65-2.23-6.23c0.09,2.14,0.09,4.01,0.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07\n\t\t\tc1.25,3.03,1.69,4.18,2.67,6.76c0.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3H453.75z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M511.42,630.37l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3H511.42z M496.91,584.53\n\t\t\tc-0.89-2.76-1.16-3.92-1.42-5.16c-0.27,1.25-0.53,2.4-1.42,5.16l-7.57,24.48h18.07L496.91,584.53z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M555.38,588.98c0.36-1.96,0.53-3.12,0.53-5.25c0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88\n\t\t\tc0,7.83,8.19,9.17,15.22,11.84c7.21,2.76,16.02,6.41,16.02,17.98c0,11.3-9.08,18.16-20.47,18.16s-20.47-6.85-20.47-18.16\n\t\t\tc0-2.58,0.53-4.54,1.07-5.87l7.92-0.45c-0.62,2.05-0.98,4.01-0.98,6.32c0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04\n\t\t\tc0-8.19-8.99-10.24-14.95-12.37c-8.37-3.03-16.29-6.59-16.29-17.62c0-10.5,8.63-16.82,18.69-16.82s18.69,6.32,18.69,16.82\n\t\t\tc0,1.69-0.27,3.74-0.62,4.9L555.38,588.98z"
+  }))), align === 'center' && (/*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M319.77,626.67v-62.3h8.01v62.3H319.77z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M377.35,626.67l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.33,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H377.35z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M464.92,604.42c0,5.79-1.25,10.86-3.92,14.86c-3.83,5.88-9.97,8.72-17.18,8.72c-8.1,0-13.8-3.56-17.45-8.63\n\t\t\tc-4.81-6.59-6.41-15.75-6.41-23.85c0.09-14.86,5.79-32.49,23.94-32.49c11.48,0,19.22,8.63,19.22,19.05c0,1.07-0.09,2.49-0.36,3.65\n\t\t\tl-7.92,0.45c0.18-0.98,0.27-2.14,0.27-3.38c0-6.85-4-12.64-11.21-12.64c-12.37,0-15.93,14.6-15.93,25.37\n\t\t\tc0,5.16,0.8,12.28,3.47,17.36c2.49,4.72,6.68,8.01,12.37,8.01c9.43,0,12.82-7.48,13.17-16.91L464.92,604.42z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M477.03,626.67v-62.3h8.01v62.3H477.03z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M534.61,626.67l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.33,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H534.61z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M558.81,626.67v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12H558.81z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M651.82,626.67v-37.83c0-2.22,0-4.09,0.09-6.23c-0.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72\n\t\t\tc-0.98-2.31-1.42-3.65-2.23-6.23c0.09,2.14,0.09,4.01,0.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07\n\t\t\tc1.25,3.03,1.69,4.18,2.67,6.76c0.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3H651.82z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M709.49,626.67l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3H709.49z M694.98,580.84\n\t\t\tc-0.89-2.76-1.16-3.92-1.42-5.16c-0.27,1.25-0.53,2.4-1.42,5.16l-7.57,24.48h18.07L694.98,580.84z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M753.46,585.29c0.36-1.96,0.53-3.12,0.53-5.25c0-6.14-4.54-9.88-10.68-9.88c-6.14,0-10.68,3.74-10.68,9.88\n\t\t\tc0,7.83,8.19,9.17,15.22,11.84c7.21,2.76,16.02,6.41,16.02,17.98c0,11.3-9.08,18.16-20.47,18.16s-20.47-6.85-20.47-18.16\n\t\t\tc0-2.58,0.53-4.54,1.07-5.87l7.92-0.45c-0.62,2.05-0.98,4.01-0.98,6.32c0,7.03,5.43,11.04,12.46,11.04c7.03,0,12.46-4,12.46-11.04\n\t\t\tc0-8.19-8.99-10.24-14.95-12.37c-8.37-3.03-16.29-6.59-16.29-17.62c0-10.5,8.63-16.82,18.69-16.82S762,569.36,762,579.86\n\t\t\tc0,1.69-0.27,3.74-0.62,4.9L753.46,585.29z"
+  })))));
 };
-var fontFamilies = {
-  adobeGaramondPro: 'adobe-garamond-pro',
-  adobeGaramondProItalics: 'adobe-garamond-pro',
-  gothamSSmMedium: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
+
+var breakpoints = {
+  xs: 320,
+  sm: 700,
+  md: 1140,
+  ml: 1280,
+  lg: 1400
+};
+var devices = {
+  smallMobile: "only screen and (max-width: " + (breakpoints.xs - 1) + "px)",
+  mobile: "only screen and (max-width: " + (breakpoints.sm - 1) + "px)",
+  tablet: "only screen and (max-width: " + (breakpoints.md - 1) + "px) and (min-width: " + breakpoints.sm + "px)",
+  mobileAndTablet: "only screen and (max-width: " + (breakpoints.md - 1) + "px)",
+  desktop: "only screen and (max-width: " + (breakpoints.lg - 1) + "px) and (min-width: " + breakpoints.md + "px)",
+  smallDesktop: "only screen and (max-width: " + (breakpoints.ml - 1) + "px) and (min-width: " + breakpoints.md + "px)",
+  largeDesktop: "only screen and (min-width: " + breakpoints.lg + "px)"
+};
+
+var _templateObject$1;
+var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", "\n    var(--button-padding-x);\n  height: var(--button-height);\n  font-family: var(--font-family-buttons);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: var(--base-color-", ");\n  line-height: var(--button-line-height);\n  width: fit-content;\n  border-style: solid;\n  border-width: 1px;\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n\n  @media ", " {\n    & {\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
+  var iconName = _ref.iconName;
+  return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
+}, function (_ref2) {
+  var color = _ref2.color;
+  return color;
+}, devices.mobile);
+
+var _templateObject$2;
+var ButtonIconWrapper = /*#__PURE__*/styled.span(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n  display: inline-block;\n"])));
+
+var colors = {
+  core: '#C8102E',
+  stream: '#1866DC',
+  cinema: '#1A1A1A'
+};
+var commonColors = {
+  black: '#1A1A1A',
+  white: '#FFFFFF',
+  darkgrey: '#727272',
+  midgrey: '#B2B2B2',
+  lightgrey: '#F0F0F0',
+  error: '#C8102E',
+  medium: '#D79233',
+  good: '#4EAA33',
+  progress: '#1866DC',
+  navigation: '#C8102E',
+  lemonChiffon: '#fffbbe',
+  lapisLazuli: '#0060a0',
+  blue: '#1866DC',
+  red: '#C8102E'
+};
+var fontFamilies = {
+  adobeGaramondPro: 'adobe-garamond-pro',
+  adobeGaramondProItalics: 'adobe-garamond-pro',
+  gothamSSmMedium: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
   gothamSSm: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
   sabonNextLTProRegular: 'Sabon Next LT Pro Regular',
   sabonNextLTProRegularItalics: 'Sabon Next LT Pro Regular Italics',
@@ -837,20 +1105,24 @@ var common = {
     desktop: {
       height: '380px',
       paddingTop: '44px',
-      paddingBottom: '0',
+      paddingBottom: '44px',
       itemsGap: '32px',
-      mediaGap: '32px',
+      mediaGap: '24px',
       mediaIconWidth: '24px',
       mediaIconHeight: '24px',
       verticalSpacingLarge: '58px',
       verticalSpacingSmall: '16px'
     },
+    tablet: {
+      paddingTop: '40px',
+      paddingBottom: '40px'
+    },
     mobile: {
       height: 'auto',
       paddingTop: '20px',
       paddingBottom: '20px',
       itemsGap: '12px',
-      mediaGap: '28px',
+      mediaGap: '32px',
       mediaIconWidth: '28px',
       mediaIconHeight: '28px',
       verticalSpacingLarge: '24px',
@@ -932,7 +1204,7 @@ var themes = {
   schools: schools
 };
 
-var _templateObject;
+var _templateObject$3;
 var Directions = {
   left: 'transform: rotate(180deg)',
   right: 'transform: rotate(0deg)',
@@ -940,7 +1212,7 @@ var Directions = {
   down: 'transform: rotate(90deg)',
   reverse: 'transform: scaleX(-1)'
 };
-var Wrapper = /*#__PURE__*/styled.span(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n\n  & svg {\n    display: block;\n    ", ";\n  }\n\n  & svg path {\n    fill: var(--base-color-", ", ", ");\n  }\n"])), function (_ref) {
+var Wrapper = /*#__PURE__*/styled.span(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n\n  & svg {\n    display: block;\n    ", ";\n  }\n\n  & svg path {\n    fill: var(--base-color-", ", ", ");\n  }\n"])), function (_ref) {
   var _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'right' : _ref$direction;
   return Directions[direction];
@@ -2653,446 +2925,181 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
 });
 Icon.displayName = 'Icon';
 
+var _excluded = ["children", "iconName", "iconDirection", "iconClassName", "color"];
+var Button = function Button(_ref) {
+  var children = _ref.children,
+    iconName = _ref.iconName,
+    iconDirection = _ref.iconDirection,
+    iconClassName = _ref.iconClassName,
+    color = _ref.color,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var truncatedString = children.substring(0, 30);
+  return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
+    color: color,
+    iconName: iconName
+  }), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
+    "data-testid": "button-icon",
+    className: iconClassName
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: iconName,
+    direction: iconDirection,
+    color: color
+  }))) : null, truncatedString);
+};
+
+var _templateObject$4, _templateObject2;
+var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  border-color: ", ";\n  pointer-events: ", ";\n"])), function (_ref) {
+  var _theme$colors;
+  var bgColor = _ref.bgColor,
+    theme = _ref.theme;
+  return bgColor ? "var(--base-color-" + bgColor + ")" : theme == null || (_theme$colors = theme.colors) == null ? void 0 : _theme$colors.primary;
+}, function (_ref2) {
+  var _theme$colors2;
+  var bgColor = _ref2.bgColor,
+    theme = _ref2.theme;
+  return bgColor ? "var(--base-color-" + bgColor + ")" : theme == null || (_theme$colors2 = theme.colors) == null ? void 0 : _theme$colors2.primary;
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? 'none' : 'auto';
+});
+var AriaDescription = /*#__PURE__*/styled.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
+
 // eslint-disable-next-line no-shadow
-var Colors;
-(function (Colors) {
-  Colors["White"] = "white";
-  Colors["Black"] = "black";
-  Colors["DarkGrey"] = "darkgrey";
-  Colors["MidGrey"] = "midgrey";
-  Colors["LightGrey"] = "lightgrey";
-  Colors["Trasparent"] = "transparent";
-  Colors["ErrorState"] = "errorstate";
-  Colors["MediumState"] = "mediumstate";
-  Colors["GoodState"] = "goodstate";
-  Colors["Primary"] = "primary";
-  Colors["Core"] = "core";
-  Colors["Stream"] = "stream";
-  Colors["Cinema"] = "cinema";
-})(Colors || (Colors = {}));
-// eslint-disable-next-line no-shadow
-var ThemeType;
-(function (ThemeType) {
-  ThemeType["Core"] = "core";
-  ThemeType["Stream"] = "stream";
-  ThemeType["Cinema"] = "cinema";
-  ThemeType["Schools"] = "schools";
-})(ThemeType || (ThemeType = {}));
+var CarouselType;
+(function (CarouselType) {
+  CarouselType["Image"] = "image";
+  CarouselType["SmallCard"] = "SmallCard";
+  CarouselType["LargeCard"] = "LargeCard";
+})(CarouselType || (CarouselType = {}));
+
+var AspectRatio;
+(function (AspectRatio) {
+  AspectRatio["1:1"] = "1 / 1";
+  AspectRatio["3:4"] = "3 / 4";
+  AspectRatio["4:3"] = "4 / 3";
+  AspectRatio["8:3"] = "8 / 3";
+  AspectRatio["16:9"] = "16 / 9";
+})(AspectRatio || (AspectRatio = {}));
+var AspectRatioLegacy;
+(function (AspectRatioLegacy) {
+  AspectRatioLegacy["1 / 1"] = "100";
+  AspectRatioLegacy["3 / 4"] = "133";
+  AspectRatioLegacy["4 / 3"] = "75";
+  AspectRatioLegacy["8 / 3"] = "37.5";
+  AspectRatioLegacy["16 / 9"] = "56.25";
+})(AspectRatioLegacy || (AspectRatioLegacy = {}));
+var AspectRatioWidth;
+(function (AspectRatioWidth) {
+  AspectRatioWidth["1 / 1"] = "1";
+  AspectRatioWidth["3 / 4"] = "0.75";
+  AspectRatioWidth["4 / 3"] = "1.33";
+  AspectRatioWidth["8 / 3"] = "2.67";
+  AspectRatioWidth["16 / 9"] = "1.78";
+})(AspectRatioWidth || (AspectRatioWidth = {}));
+
 // eslint-disable-next-line no-shadow
-var LinkTarget;
-(function (LinkTarget) {
-  /**
-   * Opens the link in the same frame or tab as the current page.
-   */
-  LinkTarget["Self"] = "_self";
-  /**
-   * Opens the link in a new browser tab or window, depending on the browser settings.
-   */
-  LinkTarget["Blank"] = "_blank";
-})(LinkTarget || (LinkTarget = {}));
+var TickboxMode;
+(function (TickboxMode) {
+  TickboxMode["Dark"] = "dark";
+  TickboxMode["Light"] = "light";
+})(TickboxMode || (TickboxMode = {}));
 
-var _templateObject$1;
-var BadgeWrapper = /*#__PURE__*/styled.svg(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: auto;\n\n  g,\n  path {\n    fill: var(--base-color-", ");\n  }\n"])), function (_ref) {
-  var fillColor = _ref.fillColor;
-  return fillColor;
+var ButtonType;
+(function (ButtonType) {
+  ButtonType["Primary"] = "Primary";
+  ButtonType["Secondary"] = "Secondary";
+  ButtonType["Tertiary"] = "Tertiary";
+})(ButtonType || (ButtonType = {}));
+
+var IInformationCtaVariant;
+(function (IInformationCtaVariant) {
+  IInformationCtaVariant["Primary"] = "Primary";
+  IInformationCtaVariant["Secondary"] = "Secondary";
+  IInformationCtaVariant["Tertiary"] = "Tertiary";
+  IInformationCtaVariant["TextLink"] = "TextLink";
+})(IInformationCtaVariant || (IInformationCtaVariant = {}));
+var IInformationCtaTheme;
+(function (IInformationCtaTheme) {
+  IInformationCtaTheme["Cinema"] = "Cinema";
+  IInformationCtaTheme["Core"] = "Core";
+  IInformationCtaTheme["Stream"] = "Stream";
+})(IInformationCtaTheme || (IInformationCtaTheme = {}));
+var IInformationTitleVariant;
+(function (IInformationTitleVariant) {
+  IInformationTitleVariant["Header"] = "Header";
+  IInformationTitleVariant["AltHeader"] = "AltHeader";
+})(IInformationTitleVariant || (IInformationTitleVariant = {}));
+var IInformationBackgroundColour;
+(function (IInformationBackgroundColour) {
+  IInformationBackgroundColour["Cinema"] = "cinema";
+  IInformationBackgroundColour["Core"] = "core";
+  IInformationBackgroundColour["Stream"] = "stream";
+  IInformationBackgroundColour["White"] = "white";
+})(IInformationBackgroundColour || (IInformationBackgroundColour = {}));
+
+var _excluded$1 = ["children", "disabled"];
+var PrimaryButton = function PrimaryButton(_ref) {
+  var children = _ref.children,
+    disabled = _ref.disabled,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var description = 'This button is currently disabled';
+  return disabled ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
+    id: "description"
+  }, description), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
+    color: Colors.Black,
+    bgColor: Colors.MidGrey,
+    disabled: true,
+    "aria-disabled": "true",
+    role: "button",
+    "aria-describedby": description
+  }, props), children))) : (/*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
+    color: Colors.White
+  }, props), children));
+};
+
+var _templateObject$5;
+var PrimaryButtonWrapper$1 = /*#__PURE__*/styled(Button)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-transparent);\n  border-color: ", ";\n"])), function (_ref) {
+  var color = _ref.color,
+    theme = _ref.theme;
+  return color ? "var(--base-color-" + color + ")" : theme.colors.primary;
 });
 
-/* eslint-disable max-len */
-var StreamBadge = function StreamBadge(_ref) {
-  var _ref$fillColor = _ref.fillColor,
-    fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'center' : _ref$align,
-    _ref$invert = _ref.invert,
-    invert = _ref$invert === void 0 ? false : _ref$invert;
-  var colour = invert ? Colors.Black : fillColor;
-  return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
-    fillColor: colour,
-    width: "100%",
-    height: "100%",
-    viewBox: "110 450 865 200",
-    xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
-    "aria-label": "Royal Ballet & Opera - Stream"
-  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M416.81,485.21c0-9.38-6.6-14.94-18.59-14.94h-23.1v60.79h22.84c13.2,0,20.58-7.12,20.58-17.97,0-7.3-4.86-13.11-13.46-14.07,7.9-1.13,11.73-7.47,11.73-13.8ZM389.28,481.3h5.47c5.47,0,7.64,2.69,7.64,6.51s-2.17,6.51-7.73,6.51h-5.38v-13.03ZM395.79,519.59h-6.51v-14.59h6.42c4.95,0,8.43,2.69,8.43,7.29s-3.39,7.29-8.34,7.29Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M435.74,518.9h19.19l3.73,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76l3.73-12.16ZM445.29,487.55l5.82,18.85h-11.64l5.82-18.85Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M774.06,500.66c0-18.15-13.89-31.7-32.56-31.7s-32.56,13.54-32.56,31.7,13.98,31.7,32.56,31.7,32.56-13.55,32.56-31.7ZM723.44,500.66c0-10.59,7.81-18.58,18.06-18.58s18.06,7.99,18.06,18.58-7.73,18.58-18.06,18.58-18.06-7.99-18.06-18.58Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "511.38 470.27 511.38 531.06 542.64 531.06 542.64 518.38 525.53 518.38 525.53 470.27 511.38 470.27",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "610.2 531.06 610.2 482.95 623.83 482.95 623.83 470.27 582.41 470.27 582.41 482.95 596.04 482.95 596.04 531.06 610.2 531.06",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "578.59 482.95 578.59 470.27 546.46 470.27 546.46 531.06 578.59 531.06 578.59 518.38 560.61 518.38 560.61 506.74 575.03 506.74 575.03 494.06 560.61 494.06 560.61 482.95 578.59 482.95",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "475.86 470.27 475.86 531.06 507.12 531.06 507.12 518.38 490.01 518.38 490.01 470.27 475.86 470.27",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "324.76 470.27 324.76 531.06 356.02 531.06 356.02 518.38 338.92 518.38 338.92 470.27 324.76 470.27",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M800.98,508.48c12.33,0,20.58-7.99,20.58-19.11s-8.25-19.1-20.58-19.1h-23.19v60.79h14.16v-22.58h9.03ZM791.95,481.91h6.42c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56h-6.42v-15.02Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M923.95,470.27l-19.45,57.31-11.03-20.75c7.12-2.95,11.46-9.38,11.46-17.45,0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.58h3.56l11.55,22.58h27.62l3.73-12.16h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85ZM881.74,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56ZM925.51,506.39l5.82-18.85,5.82,18.85h-11.64Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M636.25,511c0,12.24,9.38,21.36,22.49,21.36,7.21,0,13.2-2.78,18.24-7.38l4.86,6.08h17.8l-13.37-16.59,9.81-14.33-10.85-7.47-7.64,11.12-16.85-20.84h18.93v-12.68h-36.64v12.68l6.68,8.25c-8.94,4.34-13.46,11.46-13.46,19.8ZM657.61,501.01l11.29,14.07c-2.26,2.34-5.21,4.17-9.03,4.17-5.64,0-9.21-4-9.21-8.77,0-4.26,2.87-7.81,6.95-9.46Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M176.87,529.41c-9.38-5.9-17.02-14.16-22.06-23.01,6.6-3.04,10.6-9.29,10.6-17.02,0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.84h5.13c6.16,12.68,16.06,24.49,27.87,31.78h0l8.08-10.59ZM142.23,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M284.56,518.9h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76l3.73-12.16ZM294.11,487.55l5.82,18.85h-11.64l5.82-18.85Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M201.1,468.97c-18.58,0-32.56,13.54-32.56,31.7s13.98,31.7,32.56,31.7,32.56-13.55,32.56-31.7-13.89-31.7-32.56-31.7ZM201.1,519.25c-10.25,0-18.06-7.99-18.06-18.58s7.81-18.58,18.06-18.58,18.06,7.99,18.06,18.58-7.73,18.58-18.06,18.58Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "254.42 490.41 242.44 470.27 226.37 470.27 247.3 504.92 247.3 531.06 261.46 531.06 261.46 504.74 282.3 470.27 266.32 470.27 254.42 490.41",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "857.34 482.95 857.34 470.27 825.21 470.27 825.21 531.06 857.34 531.06 857.34 518.38 839.36 518.38 839.36 506.74 853.78 506.74 853.78 494.06 839.36 494.06 839.36 482.95 857.34 482.95",
-    "stroke-width": "0"
-  })), align === 'left' && (/*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M151.07,588.98c.36-1.96.53-3.12.53-5.25,0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88c0,7.83,8.19,9.17,15.22,11.84,7.21,2.76,16.02,6.41,16.02,17.98s-9.08,18.16-20.47,18.16-20.47-6.85-20.47-18.16c0-2.58.53-4.54,1.07-5.87l7.92-.45c-.62,2.05-.98,4.01-.98,6.32,0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04c0-8.19-8.99-10.24-14.95-12.37-8.37-3.03-16.29-6.59-16.29-17.62s8.63-16.82,18.69-16.82,18.69,6.32,18.69,16.82c0,1.69-.27,3.74-.62,4.9l-7.92.53Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M184,630.37v-55.18h-16.91v-7.12h41.83v7.12h-16.91v55.18h-8.01Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M249.5,630.37c-1.69-2.58-1.33-11.04-1.6-16.2-.18-4.18-.98-6.32-2.49-7.83-1.6-1.51-4.18-2.22-7.48-2.22h-10.68v26.26h-8.01v-62.3h20.56c6.59,0,10.68,1.87,13.71,4.89,3.2,3.2,5.34,7.74,5.34,12.91,0,7.3-5.16,14.42-14.15,15.04,6.41.71,10.5,4.9,11.04,12.82l.36,5.52c.27,3.74.36,6.14.8,7.92.27,1.07.8,2.31,1.96,2.85v.36h-9.35ZM239.09,596.99c4.63,0,7.03-1.07,8.72-2.85,1.87-1.96,3.03-4.9,3.03-8.01s-1.16-5.96-3.03-7.92c-1.69-1.78-4.09-3.03-8.72-3.03h-11.84v21.81h11.84Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M271.93,630.37v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12h-35.16Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M353.01,630.37l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3h-8.19ZM338.5,584.53c-.89-2.76-1.16-3.92-1.42-5.16-.27,1.25-.53,2.4-1.42,5.16l-7.57,24.48h18.07l-7.65-24.48Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M416.55,630.37v-37.83c0-2.22,0-4.09.09-6.23-.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72c-.98-2.31-1.42-3.65-2.23-6.23.09,2.14.09,4.01.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07c1.25,3.03,1.69,4.18,2.67,6.76.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3h-7.92Z",
-    "stroke-width": "0"
-  }))), align === 'center' && (/*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M401.56,585.29c.36-1.96.53-3.12.53-5.25,0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88c0,7.83,8.19,9.17,15.22,11.84,7.21,2.76,16.02,6.41,16.02,17.98s-9.08,18.16-20.47,18.16-20.47-6.85-20.47-18.16c0-2.58.53-4.54,1.07-5.87l7.92-.45c-.62,2.05-.98,4.01-.98,6.32,0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04c0-8.19-8.99-10.24-14.95-12.37-8.37-3.03-16.29-6.59-16.29-17.62s8.63-16.82,18.69-16.82,18.69,6.32,18.69,16.82c0,1.69-.27,3.74-.62,4.9l-7.92.53Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M434.49,626.68v-55.18h-16.91v-7.12h41.83v7.12h-16.91v55.18h-8.01Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M500,626.68c-1.69-2.58-1.33-11.04-1.6-16.2-.18-4.18-.98-6.32-2.49-7.83-1.6-1.51-4.18-2.22-7.48-2.22h-10.68v26.26h-8.01v-62.3h20.56c6.59,0,10.68,1.87,13.71,4.89,3.2,3.2,5.34,7.74,5.34,12.91,0,7.3-5.16,14.42-14.15,15.04,6.41.71,10.5,4.9,11.04,12.82l.36,5.52c.27,3.74.36,6.14.8,7.92.27,1.07.8,2.31,1.96,2.85v.36h-9.35ZM489.58,593.3c4.63,0,7.03-1.07,8.72-2.85,1.87-1.96,3.03-4.9,3.03-8.01s-1.16-5.96-3.03-7.92c-1.69-1.78-4.09-3.03-8.72-3.03h-11.84v21.81h11.84Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M522.42,626.68v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12h-35.16Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M603.5,626.68l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3h-8.19ZM588.99,580.84c-.89-2.76-1.16-3.92-1.42-5.16-.27,1.25-.53,2.4-1.42,5.16l-7.57,24.48h18.07l-7.65-24.48Z",
-    "stroke-width": "0"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M667.05,626.68v-37.83c0-2.22,0-4.09.09-6.23-.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72c-.98-2.31-1.42-3.65-2.23-6.23.09,2.14.09,4.01.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07c1.25,3.03,1.69,4.18,2.67,6.76.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3h-7.92Z",
-    "stroke-width": "0"
-  }))));
-};
-
-/* eslint-disable max-len */
-var CinemaBadge = function CinemaBadge(_ref) {
-  var _ref$fillColor = _ref.fillColor,
-    fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'center' : _ref$align,
-    _ref$invert = _ref.invert,
-    invert = _ref$invert === void 0 ? false : _ref$invert;
-  var colour = invert ? Colors.Black : fillColor;
-  return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
-    fillColor: colour,
-    width: "100%",
-    height: "100%",
-    viewBox: "110 450 865 200",
-    xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
-    "aria-label": "Royal Ballet & Opera - Cinema"
-  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M416.26,485.21c0-9.38-6.6-14.94-18.59-14.94h-23.1v60.79h22.84c13.2,0,20.58-7.12,20.58-17.97\n\t\t\t\tc0-7.3-4.86-13.11-13.46-14.07C412.43,497.88,416.26,491.54,416.26,485.21z M388.73,481.3h5.47c5.47,0,7.64,2.69,7.64,6.51\n\t\t\t\tc0,3.82-2.17,6.51-7.73,6.51h-5.38V481.3z M395.24,519.59h-6.51v-14.59h6.42c4.95,0,8.43,2.69,8.43,7.29\n\t\t\t\tC403.58,516.81,400.19,519.59,395.24,519.59z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M773.51,500.66c0-18.15-13.89-31.7-32.56-31.7c-18.58,0-32.56,13.54-32.56,31.7\n\t\t\t\tc0,18.15,13.98,31.7,32.56,31.7C759.61,532.36,773.51,518.81,773.51,500.66z M722.88,500.66c0-10.59,7.81-18.58,18.06-18.58\n\t\t\t\tc10.33,0,18.06,7.99,18.06,18.58c0,10.59-7.73,18.58-18.06,18.58C730.7,519.25,722.88,511.26,722.88,500.66z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M435.19,518.9h19.19l3.73,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76L435.19,518.9z\n\t\t\t\t M444.74,487.55l5.82,18.85h-11.64L444.74,487.55z"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "475.31,470.27 475.31,531.06 506.57,531.06 506.57,518.38 489.46,518.38 489.46,470.27"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "609.65,531.06 609.65,482.95 623.28,482.95 623.28,470.27 581.86,470.27 581.86,482.95 \n\t\t\t\t595.49,482.95 595.49,531.06"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "578.03,482.95 578.03,470.27 545.91,470.27 545.91,531.06 578.03,531.06 578.03,518.38 \n\t\t\t\t560.06,518.38 560.06,506.74 574.47,506.74 574.47,494.06 560.06,494.06 560.06,482.95"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "324.21,470.27 324.21,531.06 355.47,531.06 355.47,518.38 338.36,518.38 338.36,470.27"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "510.82,470.27 510.82,531.06 542.09,531.06 542.09,518.38 524.98,518.38 524.98,470.27"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M284,518.9h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76L284,518.9z M293.55,487.55\n\t\t\t\tl5.82,18.85h-11.64L293.55,487.55z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M635.7,511c0,12.24,9.38,21.36,22.49,21.36c7.21,0,13.2-2.78,18.24-7.38l4.86,6.08h17.8l-13.37-16.59\n\t\t\t\tl9.81-14.33l-10.85-7.47l-7.64,11.12l-16.85-20.84h18.93v-12.68h-36.64v12.68l6.68,8.25C640.21,495.54,635.7,502.66,635.7,511z\n\t\t\t\t M657.06,501.01l11.29,14.07c-2.26,2.34-5.21,4.17-9.03,4.17c-5.64,0-9.21-4-9.21-8.77\n\t\t\t\tC650.11,506.22,652.98,502.66,657.06,501.01z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M176.32,529.41c-9.38-5.9-17.02-14.16-22.06-23.01c6.6-3.04,10.6-9.29,10.6-17.02\n\t\t\t\tc0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.84h5.13c6.16,12.68,16.06,24.49,27.87,31.78h0L176.32,529.41z\n\t\t\t\t M141.67,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47C150.36,493.72,147.93,496.93,141.67,496.93z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M923.39,470.27l-19.45,57.31l-11.03-20.75c7.12-2.95,11.46-9.38,11.46-17.45\n\t\t\t\tc0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.58h3.56l11.55,22.58h27.62l3.73-12.16h19.19l3.74,12.16h14.76\n\t\t\t\tl-20.67-60.79H923.39z M881.19,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47C889.87,493.72,887.44,496.93,881.19,496.93z\n\t\t\t\t M924.95,506.39l5.82-18.85l5.82,18.85H924.95z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M800.43,508.48c12.33,0,20.58-7.99,20.58-19.11c0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.16v-22.58\n\t\t\t\tH800.43z M791.4,481.91h6.42c6.25,0,8.68,3.21,8.68,7.47c0,4.34-2.43,7.56-8.68,7.56h-6.42V481.91z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M200.55,468.97c-18.58,0-32.56,13.54-32.56,31.7c0,18.15,13.98,31.7,32.56,31.7\n\t\t\t\tc18.67,0,32.56-13.55,32.56-31.7C233.11,482.51,219.22,468.97,200.55,468.97z M200.55,519.25c-10.25,0-18.06-7.99-18.06-18.58\n\t\t\t\tc0-10.59,7.81-18.58,18.06-18.58c10.33,0,18.06,7.99,18.06,18.58C218.61,511.26,210.88,519.25,200.55,519.25z"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "253.87,490.41 241.89,470.27 225.82,470.27 246.75,504.92 246.75,531.06 260.9,531.06 \n\t\t\t\t260.9,504.74 281.74,470.27 265.76,470.27"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "856.79,482.95 856.79,470.27 824.66,470.27 824.66,531.06 856.79,531.06 856.79,518.38 \n\t\t\t\t838.81,518.38 838.81,506.74 853.23,506.74 853.23,494.06 838.81,494.06 838.81,482.95"
-  }))), align === 'left' && (/*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M121.69,630.37v-62.3h8.01v62.3H121.69z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M179.27,630.37l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.33,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H179.27z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M266.85,608.12c0,5.79-1.25,10.86-3.92,14.86c-3.83,5.88-9.97,8.72-17.18,8.72c-8.1,0-13.8-3.56-17.44-8.63\n\t\t\tc-4.81-6.59-6.41-15.75-6.41-23.85c0.09-14.86,5.79-32.49,23.94-32.49c11.48,0,19.23,8.63,19.23,19.05c0,1.07-0.09,2.49-0.36,3.65\n\t\t\tl-7.92,0.45c0.18-0.98,0.27-2.14,0.27-3.38c0-6.85-4.01-12.64-11.21-12.64c-12.37,0-15.93,14.6-15.93,25.37\n\t\t\tc0,5.16,0.8,12.28,3.47,17.36c2.49,4.72,6.68,8.01,12.37,8.01c9.43,0,12.82-7.48,13.17-16.91L266.85,608.12z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M278.95,630.37v-62.3h8.01v62.3H278.95z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M336.53,630.37l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.34,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H336.53z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M360.74,630.37v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12H360.74z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M453.75,630.37v-37.83c0-2.22,0-4.09,0.09-6.23c-0.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72\n\t\t\tc-0.98-2.31-1.42-3.65-2.23-6.23c0.09,2.14,0.09,4.01,0.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07\n\t\t\tc1.25,3.03,1.69,4.18,2.67,6.76c0.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3H453.75z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M511.42,630.37l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3H511.42z M496.91,584.53\n\t\t\tc-0.89-2.76-1.16-3.92-1.42-5.16c-0.27,1.25-0.53,2.4-1.42,5.16l-7.57,24.48h18.07L496.91,584.53z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M555.38,588.98c0.36-1.96,0.53-3.12,0.53-5.25c0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88\n\t\t\tc0,7.83,8.19,9.17,15.22,11.84c7.21,2.76,16.02,6.41,16.02,17.98c0,11.3-9.08,18.16-20.47,18.16s-20.47-6.85-20.47-18.16\n\t\t\tc0-2.58,0.53-4.54,1.07-5.87l7.92-0.45c-0.62,2.05-0.98,4.01-0.98,6.32c0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04\n\t\t\tc0-8.19-8.99-10.24-14.95-12.37c-8.37-3.03-16.29-6.59-16.29-17.62c0-10.5,8.63-16.82,18.69-16.82s18.69,6.32,18.69,16.82\n\t\t\tc0,1.69-0.27,3.74-0.62,4.9L555.38,588.98z"
-  }))), align === 'center' && (/*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M319.77,626.67v-62.3h8.01v62.3H319.77z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M377.35,626.67l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.33,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H377.35z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M464.92,604.42c0,5.79-1.25,10.86-3.92,14.86c-3.83,5.88-9.97,8.72-17.18,8.72c-8.1,0-13.8-3.56-17.45-8.63\n\t\t\tc-4.81-6.59-6.41-15.75-6.41-23.85c0.09-14.86,5.79-32.49,23.94-32.49c11.48,0,19.22,8.63,19.22,19.05c0,1.07-0.09,2.49-0.36,3.65\n\t\t\tl-7.92,0.45c0.18-0.98,0.27-2.14,0.27-3.38c0-6.85-4-12.64-11.21-12.64c-12.37,0-15.93,14.6-15.93,25.37\n\t\t\tc0,5.16,0.8,12.28,3.47,17.36c2.49,4.72,6.68,8.01,12.37,8.01c9.43,0,12.82-7.48,13.17-16.91L464.92,604.42z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M477.03,626.67v-62.3h8.01v62.3H477.03z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M534.61,626.67l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.33,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H534.61z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M558.81,626.67v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12H558.81z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M651.82,626.67v-37.83c0-2.22,0-4.09,0.09-6.23c-0.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72\n\t\t\tc-0.98-2.31-1.42-3.65-2.23-6.23c0.09,2.14,0.09,4.01,0.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07\n\t\t\tc1.25,3.03,1.69,4.18,2.67,6.76c0.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3H651.82z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M709.49,626.67l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3H709.49z M694.98,580.84\n\t\t\tc-0.89-2.76-1.16-3.92-1.42-5.16c-0.27,1.25-0.53,2.4-1.42,5.16l-7.57,24.48h18.07L694.98,580.84z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M753.46,585.29c0.36-1.96,0.53-3.12,0.53-5.25c0-6.14-4.54-9.88-10.68-9.88c-6.14,0-10.68,3.74-10.68,9.88\n\t\t\tc0,7.83,8.19,9.17,15.22,11.84c7.21,2.76,16.02,6.41,16.02,17.98c0,11.3-9.08,18.16-20.47,18.16s-20.47-6.85-20.47-18.16\n\t\t\tc0-2.58,0.53-4.54,1.07-5.87l7.92-0.45c-0.62,2.05-0.98,4.01-0.98,6.32c0,7.03,5.43,11.04,12.46,11.04c7.03,0,12.46-4,12.46-11.04\n\t\t\tc0-8.19-8.99-10.24-14.95-12.37c-8.37-3.03-16.29-6.59-16.29-17.62c0-10.5,8.63-16.82,18.69-16.82S762,569.36,762,579.86\n\t\t\tc0,1.69-0.27,3.74-0.62,4.9L753.46,585.29z"
-  })))));
-};
-
-var breakpoints = {
-  xs: 320,
-  sm: 700,
-  md: 1140,
-  ml: 1280,
-  lg: 1400
-};
-var devices = {
-  smallMobile: "only screen and (max-width: " + (breakpoints.xs - 1) + "px)",
-  mobile: "only screen and (max-width: " + (breakpoints.sm - 1) + "px)",
-  tablet: "only screen and (max-width: " + (breakpoints.md - 1) + "px) and (min-width: " + breakpoints.sm + "px)",
-  mobileAndTablet: "only screen and (max-width: " + (breakpoints.md - 1) + "px)",
-  desktop: "only screen and (max-width: " + (breakpoints.lg - 1) + "px) and (min-width: " + breakpoints.md + "px)",
-  smallDesktop: "only screen and (max-width: " + (breakpoints.ml - 1) + "px) and (min-width: " + breakpoints.md + "px)",
-  largeDesktop: "only screen and (min-width: " + breakpoints.lg + "px)"
+var _excluded$2 = ["children"];
+var SecondaryButton = function SecondaryButton(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, Object.assign({
+    color: Colors.Primary
+  }, props), children);
 };
 
-var _templateObject$2;
-var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", "\n    var(--button-padding-x);\n  height: var(--button-height);\n  font-family: var(--font-family-buttons);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: var(--base-color-", ");\n  line-height: var(--button-line-height);\n  width: fit-content;\n  border-style: solid;\n  border-width: 1px;\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n\n  @media ", " {\n    & {\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
-  var iconName = _ref.iconName;
-  return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
-}, function (_ref2) {
-  var color = _ref2.color;
+var _templateObject$6, _templateObject2$1;
+var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  height: var(--button-height);\n  font-family: var(--font-family-buttons);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: var(--base-color-", ");\n  width: fit-content;\n  background: none;\n  border-style: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n"])), function (_ref) {
+  var color = _ref.color;
   return color;
-}, devices.mobile);
-
-var _templateObject$3;
-var ButtonIconWrapper = /*#__PURE__*/styled.span(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n  display: inline-block;\n"])));
+});
+var TertiaryIconWrapper = /*#__PURE__*/styled.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  min-width: 20px;\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
 
-var _excluded = ["children", "iconName", "iconDirection", "iconClassName", "color"];
-var Button = function Button(_ref) {
+var _excluded$3 = ["children", "color"];
+var Button$1 = function Button(_ref) {
   var children = _ref.children,
-    iconName = _ref.iconName,
-    iconDirection = _ref.iconDirection,
-    iconClassName = _ref.iconClassName,
     color = _ref.color,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var truncatedString = children.substring(0, 30);
-  return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
-    color: color,
-    iconName: iconName
-  }), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
-    "data-testid": "button-icon",
-    className: iconClassName
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  var truncatedString = children.substring(0, 100);
+  return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
+    color: color
+  }), truncatedString, /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
+    "data-testid": "tertiary-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: iconName,
-    direction: iconDirection,
+    iconName: "Arrow",
     color: color
-  }))) : null, truncatedString);
+  })));
 };
 
-var _templateObject$4, _templateObject2;
-var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  border-color: ", ";\n  pointer-events: ", ";\n"])), function (_ref) {
-  var _theme$colors;
-  var bgColor = _ref.bgColor,
-    theme = _ref.theme;
-  return bgColor ? "var(--base-color-" + bgColor + ")" : theme == null || (_theme$colors = theme.colors) == null ? void 0 : _theme$colors.primary;
-}, function (_ref2) {
-  var _theme$colors2;
-  var bgColor = _ref2.bgColor,
-    theme = _ref2.theme;
-  return bgColor ? "var(--base-color-" + bgColor + ")" : theme == null || (_theme$colors2 = theme.colors) == null ? void 0 : _theme$colors2.primary;
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? 'none' : 'auto';
-});
-var AriaDescription = /*#__PURE__*/styled.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
-
-// eslint-disable-next-line no-shadow
-var CarouselType;
-(function (CarouselType) {
-  CarouselType["Image"] = "image";
-  CarouselType["SmallCard"] = "SmallCard";
-  CarouselType["LargeCard"] = "LargeCard";
-})(CarouselType || (CarouselType = {}));
-
-var AspectRatio;
-(function (AspectRatio) {
-  AspectRatio["1:1"] = "1 / 1";
-  AspectRatio["3:4"] = "3 / 4";
-  AspectRatio["4:3"] = "4 / 3";
-  AspectRatio["3:2"] = "3 / 2";
-  AspectRatio["16:9"] = "16 / 9";
-})(AspectRatio || (AspectRatio = {}));
-var AspectRatioLegacy;
-(function (AspectRatioLegacy) {
-  AspectRatioLegacy["1 / 1"] = "100";
-  AspectRatioLegacy["3 / 4"] = "133";
-  AspectRatioLegacy["4 / 3"] = "75";
-  AspectRatioLegacy["3 / 2"] = "66.67";
-  AspectRatioLegacy["16 / 9"] = "56.25";
-})(AspectRatioLegacy || (AspectRatioLegacy = {}));
-var AspectRatioWidth;
-(function (AspectRatioWidth) {
-  AspectRatioWidth["1 / 1"] = "1";
-  AspectRatioWidth["3 / 4"] = "0.75";
-  AspectRatioWidth["4 / 3"] = "1.33";
-  AspectRatioWidth["3 / 2"] = "1.5";
-  AspectRatioWidth["16 / 9"] = "1.78";
-})(AspectRatioWidth || (AspectRatioWidth = {}));
-
-// eslint-disable-next-line no-shadow
-var TickboxMode;
-(function (TickboxMode) {
-  TickboxMode["Dark"] = "dark";
-  TickboxMode["Light"] = "light";
-})(TickboxMode || (TickboxMode = {}));
-
-var ButtonType;
-(function (ButtonType) {
-  ButtonType["Primary"] = "Primary";
-  ButtonType["Secondary"] = "Secondary";
-  ButtonType["Tertiary"] = "Tertiary";
-})(ButtonType || (ButtonType = {}));
-
-var IInformationCtaVariant;
-(function (IInformationCtaVariant) {
-  IInformationCtaVariant["Primary"] = "Primary";
-  IInformationCtaVariant["Secondary"] = "Secondary";
-  IInformationCtaVariant["Tertiary"] = "Tertiary";
-  IInformationCtaVariant["TextLink"] = "TextLink";
-})(IInformationCtaVariant || (IInformationCtaVariant = {}));
-var IInformationCtaTheme;
-(function (IInformationCtaTheme) {
-  IInformationCtaTheme["Cinema"] = "Cinema";
-  IInformationCtaTheme["Core"] = "Core";
-  IInformationCtaTheme["Stream"] = "Stream";
-})(IInformationCtaTheme || (IInformationCtaTheme = {}));
-var IInformationTitleVariant;
-(function (IInformationTitleVariant) {
-  IInformationTitleVariant["Header"] = "Header";
-  IInformationTitleVariant["AltHeader"] = "AltHeader";
-})(IInformationTitleVariant || (IInformationTitleVariant = {}));
-var IInformationBackgroundColour;
-(function (IInformationBackgroundColour) {
-  IInformationBackgroundColour["Cinema"] = "cinema";
-  IInformationBackgroundColour["Core"] = "core";
-  IInformationBackgroundColour["Stream"] = "stream";
-  IInformationBackgroundColour["White"] = "white";
-})(IInformationBackgroundColour || (IInformationBackgroundColour = {}));
-
-var _excluded$1 = ["children", "disabled"];
-var PrimaryButton = function PrimaryButton(_ref) {
-  var children = _ref.children,
-    disabled = _ref.disabled,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var description = 'This button is currently disabled';
-  return disabled ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
-    id: "description"
-  }, description), /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
-    color: Colors.Black,
-    bgColor: Colors.MidGrey,
-    disabled: true,
-    "aria-disabled": "true",
-    role: "button",
-    "aria-describedby": description
-  }, props), children))) : (/*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
-    color: Colors.White
-  }, props), children));
-};
-
-var _templateObject$5;
-var PrimaryButtonWrapper$1 = /*#__PURE__*/styled(Button)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-transparent);\n  border-color: ", ";\n"])), function (_ref) {
-  var color = _ref.color,
-    theme = _ref.theme;
-  return color ? "var(--base-color-" + color + ")" : theme.colors.primary;
-});
-
-var _excluded$2 = ["children"];
-var SecondaryButton = function SecondaryButton(_ref) {
-  var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, Object.assign({
-    color: Colors.Primary
-  }, props), children);
-};
-
-var _templateObject$6, _templateObject2$1;
-var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  height: var(--button-height);\n  font-family: var(--font-family-buttons);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: var(--base-color-", ");\n  width: fit-content;\n  background: none;\n  border-style: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n"])), function (_ref) {
-  var color = _ref.color;
-  return color;
-});
-var TertiaryIconWrapper = /*#__PURE__*/styled.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  min-width: 20px;\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
-
-var _excluded$3 = ["children", "color"];
-var Button$1 = function Button(_ref) {
-  var children = _ref.children,
-    color = _ref.color,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var truncatedString = children.substring(0, 100);
-  return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
-    color: color
-  }), truncatedString, /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
-    "data-testid": "tertiary-icon"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "Arrow",
-    color: color
-  })));
-};
-
-var zLevels = ['base', 'content', 'contentOverlay', 'sponsorship', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
-var zIndexes = {};
-zLevels.forEach(function (name, index) {
-  zIndexes[name] = index;
+var zLevels = ['base', 'content', 'contentOverlay', 'sponsorship', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
+var zIndexes = {};
+zLevels.forEach(function (name, index) {
+  zIndexes[name] = index;
 });
 
 var _templateObject$7, _templateObject2$2, _templateObject3;
@@ -3278,7 +3285,7 @@ var GridItem = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a =
 });
 
 var _templateObject$b;
-var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
+var StyledImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -3296,6 +3303,24 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_tem
   return aspectRatio;
 });
 
+var ImageAspectRatioWrapper = function ImageAspectRatioWrapper(_ref) {
+  var aspectRatio = _ref.aspectRatio,
+    children = _ref.children,
+    alt = _ref.alt;
+  return /*#__PURE__*/React__default.createElement(StyledImageAspectRatioWrapper, {
+    aspectRatio: aspectRatio
+  }, React__default.Children.map(children, function (child) {
+    if (/*#__PURE__*/React__default.isValidElement(child)) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        alt: alt || child.props.alt || '',
+        role: alt ? 'img' : 'presentation',
+        'aria-hidden': !alt
+      });
+    }
+    return child;
+  }));
+};
+
 var _templateObject$c, _templateObject2$4, _templateObject3$2, _templateObject4$1, _templateObject5;
 var ProgressView = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: ", ";\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])), function (_ref) {
   var height = _ref.height;
@@ -3756,19 +3781,23 @@ var SectionSplitter = function SectionSplitter(_ref) {
 };
 
 var _templateObject$j;
-var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 172px;\n"])));
+var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 100%;\n  max-width: 90%;\n  height: auto;\n\n  @media ", " {\n    max-width: 100%;\n  }\n\n  @media ", " {\n    max-width: 50%;\n  }\n\n  svg {\n    display: block; /* Avoids inline SVG extra spacing issues */\n    width: 100%;\n    height: auto;\n    max-width: 100%;\n  }\n"])), devices.tablet, devices.mobile);
 
 /* eslint-disable max-len */
 var SponsorLogo = function SponsorLogo(_ref) {
   var _ref$colorLogo = _ref.colorLogo,
     colorLogo = _ref$colorLogo === void 0 ? '#fff' : _ref$colorLogo,
     _ref$colorBackground = _ref.colorBackground,
-    colorBackground = _ref$colorBackground === void 0 ? '#1d1d1b' : _ref$colorBackground;
+    colorBackground = _ref$colorBackground === void 0 ? '#1d1d1b' : _ref$colorBackground,
+    _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? 'Sponsor Logo' : _ref$alt;
   return /*#__PURE__*/React__default.createElement(SponsorLogoWrapper, null, /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 258.64 57.26",
-    width: "172",
-    height: "46"
+    preserveAspectRatio: "xMidYMid meet" // Maintains the aspect ratio while centering
+    ,
+    role: "img",
+    "aria-label": alt
   }, /*#__PURE__*/React__default.createElement("g", {
     id: "Layer_2",
     "data-name": "Layer 2"
@@ -4469,9 +4498,9 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
 };
 
 var _templateObject$q, _templateObject2$f;
-var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--harmonic-font-family-sans);\n  font-size: 17px;\n  font-weight: 500;\n  line-height: 14px;\n  letter-spacing: var(--letter-spacing-overline-1);\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (max-width: 600px) {\n  font-size: 14px;\n}\n"])), function (_ref) {
+var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--harmonic-font-family-sans);\n  font-size: 17px;\n  font-weight: 500;\n  line-height: 14px;\n  letter-spacing: 0.4px;\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (max-width: 600px) {\n    line-height: 17px;\n  }\n"])), function (_ref) {
   var iconName = _ref.iconName;
-  return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
+  return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
 }, function (_ref2) {
   var color = _ref2.color;
   return color;
@@ -5246,12 +5275,37 @@ var Component = function Component(_ref) {
   }, error))));
 };
 
-var _templateObject$x, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
-var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    ", "\n  }\n"])), devices.mobileAndTablet, function (_ref) {
+var _templateObject$x, _templateObject2$l;
+var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n"])));
+var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-media-icon-height);\n  width: var(--footer-media-icon-width);\n\n  &:focus {\n    outline: 2px solid ", ";\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.white;
+});
+
+var SocialLinks = function SocialLinks(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, items.map(function (mediaLink, idx) {
+    return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
+      key: mediaLink.name + "-" + idx,
+      href: mediaLink.href,
+      title: mediaLink.name,
+      "aria-label": "Social media link: " + mediaLink.name,
+      rel: "noopener noreferrer" // Ensures security for external links
+      ,
+      target: "_blank"
+    }, /*#__PURE__*/React__default.createElement(Icon, {
+      iconName: mediaLink.name,
+      color: "white"
+    }));
+  }));
+};
+
+var _templateObject$y, _templateObject2$m, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
+var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__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.div(_templateObject2$l || (_templateObject2$l = /*#__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 FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__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(Grid)(_templateObject3$e || (_templateObject3$e = /*#__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.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\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"])), function (_ref2) {
   var visible = _ref2.visible;
@@ -5271,8 +5325,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObjec
 var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 3 / span 14;\n  }\n"])), devices.desktop);
 var NavTopContainer = /*#__PURE__*/styled.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$y;
-var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 66px;\n  height: auto;\n  cursor: pointer;\n  & img {\n    width: auto;\n    height: 100%;\n  }\n"])));
+var _templateObject$z;
+var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 66px;\n  height: auto;\n  cursor: pointer;\n  & img {\n    width: auto;\n    height: 100%;\n  }\n"])));
 
 var Logo = function Logo(_ref) {
   var _ref$id = _ref.id,
@@ -5304,11 +5358,11 @@ var Logo = function Logo(_ref) {
   }))));
 };
 
-var _templateObject$z;
-var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__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$A;
+var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__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$A, _templateObject2$m, _templateObject3$f, _templateObject4$c;
-var BasketContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__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$B, _templateObject2$n, _templateObject3$f, _templateObject4$c;
+var BasketContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid var(--base-color-transparent);\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n\n  ", "\n"])), function (_ref) {
   var selected = _ref.selected,
     colorPrimary = _ref.colorPrimary;
   if (selected) {
@@ -5332,7 +5386,7 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObj
   }
   return '';
 });
-var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
+var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__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.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  position: absolute;\n  top: 8px;\n  margin-left: 6px;\n\n  & .basket-num {\n    color: white;\n    font-size: 10px;\n    font-family: var(--font-family-navigation);\n  }\n"])));
 var BasketText = /*#__PURE__*/styled.a(_templateObject4$c || (_templateObject4$c = /*#__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"])));
 
@@ -5476,8 +5530,8 @@ var Basket$1 = function Basket(_ref) {
   }, expiryTime ? basketText : text) : ''));
 };
 
-var _templateObject$B, _templateObject2$n;
-var SearchContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__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$C, _templateObject2$o;
+var SearchContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__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;
   if (selected) {
@@ -5491,7 +5545,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObj
   var colorPrimary = _ref3.colorPrimary;
   return colorPrimary;
 });
-var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
+var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__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,
@@ -5744,9 +5798,9 @@ var NavTop = function NavTop(_ref) {
   }));
 };
 
-var _templateObject$C, _templateObject2$o, _templateObject3$g, _templateObject4$d;
-var TabsContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n"])));
-var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__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$D, _templateObject2$p, _templateObject3$g, _templateObject4$d;
+var TabsContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n"])));
+var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__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        ";
   }
@@ -5873,9 +5927,9 @@ var Tabs = function Tabs(_ref) {
   }, "MENU"))))));
 };
 
-var _templateObject$D, _templateObject2$p, _templateObject3$h, _templateObject5$9, _templateObject6$6, _templateObject7$3;
-var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__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.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
+var _templateObject$E, _templateObject2$q, _templateObject3$h, _templateObject5$9, _templateObject6$6, _templateObject7$3;
+var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__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.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
 var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__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.div(_templateObject5$9 || (_templateObject5$9 = /*#__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.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
@@ -6087,582 +6141,157 @@ var Navigation = function Navigation(_ref) {
   }))))));
 };
 
-var _templateObject$E, _templateObject2$q, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$7;
-var FooterSection = /*#__PURE__*/styled.section(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n"])));
-var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__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.div(_templateObject3$i || (_templateObject3$i = /*#__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.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row2;\n\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), devices.mobile);
-var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__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.p(_templateObject6$7 || (_templateObject6$7 = /*#__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$F, _templateObject2$r, _templateObject3$j;
-var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$F || (_templateObject$F = /*#__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.li(_templateObject2$r || (_templateObject2$r = /*#__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.a(_templateObject3$j || (_templateObject3$j = /*#__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,
-    items = _ref$items === void 0 ? [] : _ref$items;
-  return /*#__PURE__*/React__default.createElement(PolicyLinksList, null, items.map(function (item) {
-    return /*#__PURE__*/React__default.createElement(PolicyLinkItem, {
-      key: item.name
-    }, /*#__PURE__*/React__default.createElement(PolicyLink, {
-      "data-roh": item.dataRoh,
-      href: item.href,
-      title: item.title
-    }, item.title));
-  }));
+// WARNING: Do not use this on server side rendering, it may throw an error.
+var isIOS = function isIOS() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof navigator === undefined) return false;
+    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
+    // iPad on iOS 13 detection
+    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
+  } catch (e) {
+    console.warn('Error checking if device is iOS.', e);
+    return false;
+  }
 };
-
-var _templateObject$G, _templateObject2$s, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
-var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__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.div(_templateObject2$s || (_templateObject2$s = /*#__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.div(_templateObject3$k || (_templateObject3$k = /*#__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.p(_templateObject4$f || (_templateObject4$f = /*#__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.div(_templateObject5$b || (_templateObject5$b = /*#__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.div(_templateObject6$8 || (_templateObject6$8 = /*#__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.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.div(_templateObject8$3 || (_templateObject8$3 = /*#__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"])));
-
-var ContactNewsletter = function ContactNewsletter(_ref) {
-  var signUpText = _ref.signUpText,
-    signUpLink = _ref.signUpLink,
-    socialMediaLinks = _ref.socialMediaLinks,
-    contact = _ref.contact;
-  return /*#__PURE__*/React__default.createElement(ContactNewsletterWrapper, null, /*#__PURE__*/React__default.createElement(SignUpWrapper, null, /*#__PURE__*/React__default.createElement(SignUpText, null, signUpText), /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, null, /*#__PURE__*/React__default.createElement(TextLink, {
-    href: signUpLink.href,
-    title: signUpLink.title
-  }, signUpLink.title))), /*#__PURE__*/React__default.createElement(ContactNewsletterSeparator, null), /*#__PURE__*/React__default.createElement(ContactWrapper, null, /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, socialMediaLinks.map(function (mediaLink) {
-    return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
-      key: mediaLink.name,
-      href: mediaLink.href,
-      title: mediaLink.name
-    }, /*#__PURE__*/React__default.createElement(Icon, {
-      iconName: mediaLink.name,
-      color: "white"
-    }));
-  })), /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, null, /*#__PURE__*/React__default.createElement(TextLink, {
-    href: contact.href,
-    title: contact.title
-  }, contact.title))));
+// React hook version of isIOS (for server side rendering)
+var useIOS = function useIOS() {
+  var _useState = useState(false),
+    IOS = _useState[0],
+    setIOS = _useState[1];
+  useEffect(function () {
+    if (typeof navigator === undefined) return;
+    setIOS(isIOS());
+  }, []);
+  return IOS;
 };
-
-var _excluded$b = ["dataRoh"];
-var Footer = function Footer(_ref) {
-  var data = _ref.data;
-  var policyLinks = data.policyLinks,
-    newsletter = data.newsletter,
-    rawSocialMediaLinks = data.socialMediaLinks,
-    contact = data.contact,
-    _data$artsLogo = data.artsLogo,
-    artsDataRoh = _data$artsLogo.dataRoh,
-    artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$b),
-    additionalInfo = data.additionalInfo;
-  var socialMediaLinks = rawSocialMediaLinks;
-  return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 3,
-    columnSpanDesktop: 12,
-    columnStartDevice: 2,
-    columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksRow, {
-    "data-testid": "policy-links"
-  }, /*#__PURE__*/React__default.createElement(PolicyLinks, {
-    items: policyLinks
-  })), /*#__PURE__*/React__default.createElement(ContactNewsletterRow, {
-    "data-testid": "contact-newsletter"
-  }, /*#__PURE__*/React__default.createElement(ContactNewsletter, {
-    signUpText: newsletter.text,
-    signUpLink: newsletter.link,
-    socialMediaLinks: socialMediaLinks,
-    contact: contact
-  })), /*#__PURE__*/React__default.createElement(ArtsLogoRow, {
-    "data-testid": "arts-logo"
-  }, /*#__PURE__*/React__default.createElement("a", Object.assign({
-    "data-roh": artsDataRoh,
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, artsLogo), /*#__PURE__*/React__default.createElement(SponsorLogo, null))), /*#__PURE__*/React__default.createElement(AdditionalInfo, {
-    "data-testid": "additional-info"
-  }, additionalInfo)))));
+// Checks device size based on window width
+var isMobile = function isMobile() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof window === undefined) return false;
+    return window.innerWidth < breakpoints.sm;
+  } catch (e) {
+    console.warn('Error checking if device is mobile.', e);
+    return false;
+  }
 };
-
-var _templateObject$H, _templateObject2$t, _templateObject3$l, _templateObject4$g, _templateObject5$c, _templateObject6$9;
-var LIST_ITEM_GAP = 32;
-var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__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(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
-var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var TabsList = /*#__PURE__*/styled.ul(_templateObject4$g || (_templateObject4$g = /*#__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) {
-  var tabsOverflow = _ref3.tabsOverflow;
-  return tabsOverflow ? 'start' : 'center';
-}, devices.mobileAndTablet, devices.mobile, function (_ref4) {
-  var tabsOverflow = _ref4.tabsOverflow,
-    hasTwoArrows = _ref4.hasTwoArrows;
-  return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
-});
-var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$c || (_templateObject5$c = /*#__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';
-});
-var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
-
-var _excluded$c = ["id", "text"];
-var AnchorTabBar = function AnchorTabBar(_ref) {
-  var tabs = _ref.tabs,
-    onTabClick = _ref.onTabClick,
-    activeTab = _ref.activeTab,
-    absolutePositionParams = _ref.absolutePositionParams,
-    _ref$bottomBorder = _ref.bottomBorder,
-    bottomBorder = _ref$bottomBorder === void 0 ? false : _ref$bottomBorder;
-  var tabListRef = useRef(null);
-  var wrapperRef = useRef(null);
-  var _useState = useState(activeTab || ''),
-    selectedItem = _useState[0],
-    setSelectedItem = _useState[1];
+// React hook version of isMobile (for server side rendering)
+var useMobile = function useMobile() {
   var _useState2 = useState(false),
-    tabsOverflow = _useState2[0],
-    setTabsOverflow = _useState2[1];
-  var _useState3 = useState(false),
-    canScrollToLeft = _useState3[0],
-    setCanScrollToLeft = _useState3[1];
-  var _useState4 = useState(tabsOverflow),
-    canScrollToRight = _useState4[0],
-    setCanScrollToRight = _useState4[1];
-  var timer = null;
-  var hasTwoArrows = canScrollToRight && canScrollToLeft;
-  var isSelectedItem = function isSelectedItem(id) {
-    return id === selectedItem;
-  };
-  var onClicktab = function onClicktab(e, id) {
-    if (onTabClick) {
-      onTabClick(e, id);
-    }
-    setSelectedItem(id);
-  };
-  var getScrollWidth = function getScrollWidth() {
-    var width = 0;
-    var selectedItemIndex = tabs.findIndex(function (el) {
-      return el.id === selectedItem;
-    });
-    var tabLinks = document.getElementsByClassName('anchor-tab-bar-tablink');
-    for (var i = 0; i < selectedItemIndex; ++i) {
-      width += tabLinks[i].scrollWidth + LIST_ITEM_GAP;
-    }
-    return width;
-  };
-  // eslint-disable-next-line default-param-last
-  var changeWrapperVisibility = function changeWrapperVisibility(showWrapper, topOffset) {
-    if (showWrapper === void 0) {
-      showWrapper = false;
-    }
-    var wrapperEl = wrapperRef.current;
-    wrapperEl.style.position = 'absolute';
-    wrapperEl.style.visibility = showWrapper && topOffset !== undefined ? 'visible' : 'hidden';
-    if (showWrapper && topOffset !== undefined) wrapperEl.style.top = topOffset + "px";
-  };
-  var handleScrollForAbsolutePosition = function handleScrollForAbsolutePosition() {
-    var _absolutePositionPara = absolutePositionParams.navigationHeight,
-      navigationHeight = _absolutePositionPara === void 0 ? 0 : _absolutePositionPara,
-      _absolutePositionPara2 = absolutePositionParams.topOffset,
-      topOffset = _absolutePositionPara2 === void 0 ? 0 : _absolutePositionPara2;
-    if (wrapperRef.current && window.pageYOffset > topOffset + navigationHeight) {
-      changeWrapperVisibility();
-    } else if (wrapperRef.current && window.pageYOffset < topOffset + navigationHeight) {
-      changeWrapperVisibility(true, topOffset);
-    }
-    if (timer !== null) clearTimeout(timer);
-    timer = setTimeout(function () {
-      if (window.pageYOffset > topOffset + navigationHeight && wrapperRef.current) {
-        changeWrapperVisibility(true, window.pageYOffset - navigationHeight);
-      }
-    }, 300);
-  };
-  // We use this behavior only on iOS devices because there is a known issue that
-  // sticky elements lose their stickiness when a keyboard appears on the screen
-  useEffect(function () {
-    if (absolutePositionParams) {
-      changeWrapperVisibility(true, absolutePositionParams.topOffset);
-      document.addEventListener('scroll', handleScrollForAbsolutePosition);
-      return function () {
-        document.removeEventListener('scroll', handleScrollForAbsolutePosition);
-      };
-    }
-    return undefined;
-  }, []);
+    mobile = _useState2[0],
+    setMobile = _useState2[1];
   useEffect(function () {
-    setTimeout(function () {
-      if (tabListRef.current) tabListRef.current.scrollLeft += getScrollWidth();
-    }, 500);
+    if (typeof window === undefined) return;
+    setMobile(isMobile());
   }, []);
+  return mobile;
+};
+var useViewport = function useViewport() {
+  var _useState3 = useState({
+      width: window.innerWidth,
+      isMobile: window.innerWidth < breakpoints.sm,
+      isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
+      isDesktop: window.innerWidth >= breakpoints.md
+    }),
+    viewport = _useState3[0],
+    setViewport = _useState3[1];
   useEffect(function () {
-    var _tabListRef$current, _tabListRef$current2;
-    var tabsIsOverflowed = (((_tabListRef$current = tabListRef.current) == null ? void 0 : _tabListRef$current.scrollWidth) || 0) > (((_tabListRef$current2 = tabListRef.current) == null ? void 0 : _tabListRef$current2.clientWidth) || 0);
-    setTabsOverflow(tabsIsOverflowed);
-    setCanScrollToRight(tabsIsOverflowed);
-  }, [tabListRef]);
-  useEffect(function () {
-    var scrollTriggerCheck = function scrollTriggerCheck() {
-      var elementGap = 100;
-      var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
-        var targetSectionElement = document.getElementById(item.id);
-        if (!targetSectionElement) return false;
-        var topDiff = (targetSectionElement == null ? void 0 : targetSectionElement.getBoundingClientRect().top) - elementGap;
-        return selectedItem !== item.id && topDiff > 0 && topDiff < elementGap;
+    var handleResize = function handleResize() {
+      setViewport({
+        width: window.innerWidth,
+        isMobile: window.innerWidth < breakpoints.sm,
+        isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
+        isDesktop: window.innerWidth >= breakpoints.md
       });
-      if (window.scrollY === 0) {
-        setSelectedItem(onTabClick ? selectedItem : '');
-      } else if (reachedItem) {
-        var _ref2 = (tabListRef == null ? void 0 : tabListRef.current) || {},
-          _ref2$scrollLeft = _ref2.scrollLeft,
-          scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
-          _ref2$clientWidth = _ref2.clientWidth,
-          clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
-        var tabLinkElement = document.getElementById("tablink-" + reachedItem.id) || {
-          offsetLeft: 0,
-          offsetWidth: 0
-        };
-        var offsetLeft = tabLinkElement.offsetLeft,
-          offsetWidth = tabLinkElement.offsetWidth;
-        var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
-        if (!isInView && tabListRef != null && tabListRef.current) {
-          tabListRef.current.scrollLeft = offsetLeft;
-        }
-        setSelectedItem(reachedItem.id);
-      }
     };
-    document.addEventListener('scroll', scrollTriggerCheck);
+    window.addEventListener('resize', handleResize);
     return function () {
-      return document.removeEventListener('scroll', scrollTriggerCheck);
+      return window.removeEventListener('resize', handleResize);
     };
-  }, [tabs, selectedItem, tabListRef]);
-  var tabsColumnStart;
-  if (tabsOverflow) {
-    tabsColumnStart = canScrollToLeft ? 1 : 2;
-  } else {
-    tabsColumnStart = 3;
-  }
-  var tabsColumnSpan;
-  if (tabsOverflow) {
-    tabsColumnSpan = canScrollToLeft ? 15 : 14;
-  } else {
-    tabsColumnSpan = 12;
-  }
-  var scrollToRight = function scrollToRight() {
-    if (tabListRef.current) {
-      var scroll = tabListRef.current.scrollLeft;
-      var newScroll = Math.min(tabListRef.current.clientWidth, tabListRef.current.scrollWidth - scroll);
-      if (scroll - newScroll < LIST_ITEM_GAP) {
-        tabListRef.current.scrollLeft += newScroll + LIST_ITEM_GAP;
-        return;
-      }
-      tabListRef.current.scrollLeft += newScroll;
+  }, []);
+  return viewport;
+};
+
+var _templateObject$F, _templateObject2$r, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$7;
+var FooterSection = /*#__PURE__*/styled.footer(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  padding: 40px 20px;\n\n  @media ", " {\n    padding: 32px 20px;\n  }\n\n  @media ", " {\n    padding: 20px;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.black;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.white;
+}, devices.tablet, devices.mobile);
+var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  gap: 40px;\n  max-width: 1140px;\n  margin: 0 auto;\n\n  @media ", " {\n    gap: 24px;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    gap: 40px;\n  }\n"])), devices.tablet, devices.mobile);
+var PolicyLinksSection = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: span 4;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n\n  @media ", " {\n    order: 2;\n  }\n"])), devices.mobile);
+var SocialAndNewsletterSection = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: span 4;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  @media ", " {\n    order: 1;\n    gap: 24px;\n  }\n"])), devices.mobile);
+var LogoAndDescriptionSection = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: span 4;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  img {\n    width: 120px;\n    margin-bottom: 12px;\n  }\n\n  @media ", " {\n    order: 3;\n    gap: 24px;\n  }\n"])), devices.mobile);
+var NewsletterBodyTextWrapper = /*#__PURE__*/styled(BodyText)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: auto;\n\n  @media ", " {\n    margin-top: 16px;\n  }\n"])), devices.mobile);
+
+var _templateObject$G, _templateObject2$s, _templateObject3$j, _templateObject4$f, _templateObject5$b, _templateObject6$8;
+var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
+var LineContainer = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
+var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  visibility: ", ";\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n  \n  @media print { \n    visibility: visible;\n  }\n}\n"])), function (_ref) {
+  var isVisible = _ref.isVisible;
+  return isVisible ? 'visible' : 'hidden';
+}, devices.mobile);
+var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  div {\n    margin: 21px 20px;\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
+var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n  max-height: ", ";\n\n  @media print {\n    max-height: max-content;\n  }\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref2) {
+  var textHeight = _ref2.textHeight;
+  return textHeight;
+}, devices.mobile);
+var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media print {\n    display: none;\n  }\n"])));
+
+/* eslint-disable react/no-unstable-nested-components */
+var Accordion = function Accordion(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '' : _ref$title,
+    _ref$showLine = _ref.showLine,
+    showLine = _ref$showLine === void 0 ? true : _ref$showLine,
+    children = _ref.children,
+    visibleStandfirst = _ref.visibleStandfirst,
+    _ref$initOpen = _ref.initOpen,
+    initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
+    _ref$contentType = _ref.contentType,
+    contentType = _ref$contentType === void 0 ? 'subtitle' : _ref$contentType,
+    _ref$semanticLevel = _ref.semanticLevel,
+    semanticLevel = _ref$semanticLevel === void 0 ? 4 : _ref$semanticLevel,
+    _ref$displayLevel = _ref.displayLevel,
+    displayLevel = _ref$displayLevel === void 0 ? 1 : _ref$displayLevel;
+  var _useState = useState(initOpen),
+    openAccordion = _useState[0],
+    setOpenAccordion = _useState[1];
+  var _useState2 = useState('0px'),
+    textHeight = _useState2[0],
+    setTextHeight = _useState2[1];
+  var _useState3 = useState(initOpen ? 'Detract' : 'Expand'),
+    iconName = _useState3[0],
+    setIconName = _useState3[1];
+  // Contents children visibility is set to prevent it from being keyboard tabbable when the accordion is closed
+  var _useState4 = useState(initOpen),
+    childrenVisibility = _useState4[0],
+    setChildrenVisibility = _useState4[1];
+  var content = useRef(null);
+  useEffect(function () {
+    if (content != null && content.current && initOpen) {
+      setTextHeight(content.current.scrollHeight + "px");
     }
+  }, [content, initOpen]);
+  var toggleAccordion = function toggleAccordion() {
+    if (!children) return;
+    setOpenAccordion(!openAccordion);
+    setTextHeight(openAccordion ? '0px' : content.current.scrollHeight + "px");
+    setIconName(openAccordion ? 'Expand' : 'Detract');
+    setChildrenVisibility(!openAccordion);
   };
-  var scrollToLeft = function scrollToLeft() {
-    if (tabListRef.current) {
-      var scroll = tabListRef.current.scrollLeft;
-      var newScroll = Math.max(0, scroll - tabListRef.current.clientWidth);
-      if (newScroll < LIST_ITEM_GAP) {
-        tabListRef.current.scrollLeft = newScroll - LIST_ITEM_GAP;
-        return;
-      }
-      tabListRef.current.scrollLeft = newScroll;
+  var keyDown = function keyDown(e) {
+    if (e.key === 'Enter' || e.key === 'Space') {
+      toggleAccordion();
     }
   };
-  var onTabsScroll = function onTabsScroll() {
-    var _ref3 = (tabListRef == null ? void 0 : tabListRef.current) || {},
-      _ref3$scrollLeft = _ref3.scrollLeft,
-      scrollLeft = _ref3$scrollLeft === void 0 ? 0 : _ref3$scrollLeft,
-      _ref3$clientWidth = _ref3.clientWidth,
-      clientWidth = _ref3$clientWidth === void 0 ? 0 : _ref3$clientWidth,
-      _ref3$scrollWidth = _ref3.scrollWidth,
-      scrollWidth = _ref3$scrollWidth === void 0 ? 0 : _ref3$scrollWidth;
-    setCanScrollToLeft(scrollLeft > LIST_ITEM_GAP);
-    setCanScrollToRight(scrollLeft + clientWidth + LIST_ITEM_GAP < scrollWidth);
-  };
-  return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, {
-    bottomBorder: bottomBorder,
-    ref: wrapperRef,
-    id: "AnchorTabbarWrapper"
-  }, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: tabsColumnStart,
-    columnSpanDesktop: tabsColumnSpan,
-    columnStartDevice: 2,
-    columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(TabsWrapper, {
-    "data-testid": "anchor-tabs"
-  }, /*#__PURE__*/React__default.createElement(TabsList, {
-    hasTwoArrows: hasTwoArrows,
-    ref: tabListRef,
-    tabsOverflow: tabsOverflow,
-    onScroll: onTabsScroll
-  }, tabs.map(function (_ref4) {
-    var id = _ref4.id,
-      text = _ref4.text,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$c);
-    return /*#__PURE__*/React__default.createElement("li", {
-      key: id
-    }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
-      selected: isSelectedItem(id),
-      className: "anchor-tab-bar-tablink",
-      id: "tablink-" + id,
-      onClick: function onClick(e) {
-        return onClicktab(e, id);
-      },
-      tabIndex: 0
-    }, rest), text));
-  })), tabsOverflow ? (/*#__PURE__*/React__default.createElement(ArrowsContainer, {
-    fullWidth: hasTwoArrows
-  }, canScrollToLeft ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
-    onClick: scrollToLeft
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "Arrow",
-    direction: "reverse"
-  }))) : null, canScrollToRight ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
-    onClick: scrollToRight
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "Arrow"
-  }))) : null)) : null))));
-};
-
-var _templateObject$I, _templateObject2$u, _templateObject3$m, _templateObject4$h, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
-var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__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(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
-var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__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.div(_templateObject4$h || (_templateObject4$h = /*#__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.div(_templateObject6$a || (_templateObject6$a = /*#__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.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
-var PrimaryButtonReverse = /*#__PURE__*/styled(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) {
-  var theme = _ref3.theme;
-  return theme.colors.primaryButtonReverseBg;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colors.primaryButtonReverseBg;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colors.primaryButtonReverse;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.primaryButtonReverse;
-});
-var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: var(--grid-outer-margin);\n  height: var(--button-height);\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      margin-right: var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      align-items: center;\n      margin-left: var(--grid-margin);\n      padding: 12px 0;\n    }\n  }\n"])), devices.mobile);
-
-var _excluded$d = ["text"],
-  _excluded2 = ["text"];
-var TitleWithCTA = function TitleWithCTA(_ref) {
-  var title = _ref.title,
-    links = _ref.links,
-    _ref$sticky = _ref.sticky,
-    sticky = _ref$sticky === void 0 ? false : _ref$sticky,
-    message = _ref.message;
-  var _ref2 = (links == null ? void 0 : links[0]) || {},
-    primaryButtonText = _ref2.text,
-    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
-  var _ref3 = (links == null ? void 0 : links[1]) || {},
-    secondaryButtonText = _ref3.text,
-    secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
-  return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
-    sticky: sticky
-  }, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
-    title: title
-  }, title ? (/*#__PURE__*/React__default.createElement(AnchorTitle, {
-    "data-testid": "anchor-title"
-  }, /*#__PURE__*/React__default.createElement(Header, {
-    level: 5
-  }, title))) : null, links != null && links[0] ? (/*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
-    "data-testid": "anchor-ctas"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? (/*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText)) : null)) : message && (/*#__PURE__*/React__default.createElement(MessageWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
-  }, message))))), links != null && links[0] ? (/*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText))) : message && (/*#__PURE__*/React__default.createElement(MessageWrapperMobile, null, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
-  }, message))));
-};
-
-var _templateObject$J, _templateObject2$v, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
-var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__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.div(_templateObject2$v || (_templateObject2$v = /*#__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.div(_templateObject3$n || (_templateObject3$n = /*#__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:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    '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;
-}, Colors.White);
-var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n"])));
-var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
-var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
-var PriceRow = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n  padding: 5px 0 8px 0;\n"])));
-var LineThrough = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--base-color-darkgrey);\n"])));
-
-/* eslint-disable react/no-danger */
-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 : ''
-    }
-  })));
-};
-
-// Set max. character length
-var setMaxCharLength = function setMaxCharLength(value, maxLength) {
-  return value.slice(0, maxLength);
-};
-// Format price to contain £ if not already present
-var formatPrice = function formatPrice(value) {
-  if (Number.isNaN(Number(value))) return value != null ? value : '';
-  return "\xA3" + Number(value).toFixed(2);
-};
-
-var LENGTH_SMALL_TEXT = 19;
-var OFFER_TEXTS_LIMIT = 3;
-var FLAG_CHAR_LIMIT = 30;
-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 ? ThemeType.Core : _ref$theme;
-  var truncate = function truncate(str, n) {
-    return str.length >= n ? str.slice(0, n) : str;
-  };
-  var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
-  return /*#__PURE__*/React__default.createElement(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, FLAG_CHAR_LIMIT)))), /*#__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, {
-      key: offerText.title,
-      title: offerText.title,
-      description: offerText.description
-    });
-  }), link && (/*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT))))));
-};
-
-var _templateObject$K;
-var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__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 UpsellCards = function UpsellCards(_ref) {
-  var upsellCards = _ref.upsellCards;
-  return /*#__PURE__*/React__default.createElement(Wrapper$3, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
-    return /*#__PURE__*/React__default.createElement(UpsellCard, {
-      key: "upsell-card-" + index,
-      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$L, _templateObject2$w, _templateObject3$o;
-var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__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.div(_templateObject2$w || (_templateObject2$w = /*#__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.div(_templateObject3$o || (_templateObject3$o = /*#__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$M, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$c;
-var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
-var LineContainer = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
-var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  visibility: ", ";\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n  \n  @media print { \n    visibility: visible;\n  }\n}\n"])), function (_ref) {
-  var isVisible = _ref.isVisible;
-  return isVisible ? 'visible' : 'hidden';
-}, devices.mobile);
-var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  div {\n    margin: 21px 20px;\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
-var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n  max-height: ", ";\n\n  @media print {\n    max-height: max-content;\n  }\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref2) {
-  var textHeight = _ref2.textHeight;
-  return textHeight;
-}, devices.mobile);
-var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media print {\n    display: none;\n  }\n"])));
-
-/* eslint-disable react/no-unstable-nested-components */
-var Accordion = function Accordion(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? '' : _ref$title,
-    _ref$showLine = _ref.showLine,
-    showLine = _ref$showLine === void 0 ? true : _ref$showLine,
-    children = _ref.children,
-    visibleStandfirst = _ref.visibleStandfirst,
-    _ref$initOpen = _ref.initOpen,
-    initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
-    _ref$contentType = _ref.contentType,
-    contentType = _ref$contentType === void 0 ? 'subtitle' : _ref$contentType,
-    _ref$semanticLevel = _ref.semanticLevel,
-    semanticLevel = _ref$semanticLevel === void 0 ? 4 : _ref$semanticLevel,
-    _ref$displayLevel = _ref.displayLevel,
-    displayLevel = _ref$displayLevel === void 0 ? 1 : _ref$displayLevel;
-  var _useState = useState(initOpen),
-    openAccordion = _useState[0],
-    setOpenAccordion = _useState[1];
-  var _useState2 = useState('0px'),
-    textHeight = _useState2[0],
-    setTextHeight = _useState2[1];
-  var _useState3 = useState(initOpen ? 'Detract' : 'Expand'),
-    iconName = _useState3[0],
-    setIconName = _useState3[1];
-  // Contents children visibility is set to prevent it from being keyboard tabbable when the accordion is closed
-  var _useState4 = useState(initOpen),
-    childrenVisibility = _useState4[0],
-    setChildrenVisibility = _useState4[1];
-  var content = useRef(null);
-  useEffect(function () {
-    if (content != null && content.current && initOpen) {
-      setTextHeight(content.current.scrollHeight + "px");
-    }
-  }, [content, initOpen]);
-  var toggleAccordion = function toggleAccordion() {
-    if (!children) return;
-    setOpenAccordion(!openAccordion);
-    setTextHeight(openAccordion ? '0px' : content.current.scrollHeight + "px");
-    setIconName(openAccordion ? 'Expand' : 'Detract');
-    setChildrenVisibility(!openAccordion);
-  };
-  var keyDown = function keyDown(e) {
-    if (e.key === 'Enter' || e.key === 'Space') {
-      toggleAccordion();
-    }
-  };
-  var Standfirst = function Standfirst() {
-    return visibleStandfirst ? (/*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
-      isVisible: childrenVisibility
-    }, visibleStandfirst))) : null;
+  var Standfirst = function Standfirst() {
+    return visibleStandfirst ? (/*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
+      isVisible: childrenVisibility
+    }, visibleStandfirst))) : null;
   };
   var contentContainerId = title + "-accordion-content";
   var AccordionTitle = function AccordionTitle(_ref2) {
@@ -6692,7 +6321,7 @@ var Accordion = function Accordion(_ref) {
   return /*#__PURE__*/React__default.createElement(AccordionContainer, {
     tabIndex: 0,
     onKeyDown: keyDown
-  }, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
+  }, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$1, {
     onClick: toggleAccordion,
     tabIndex: -1,
     role: "button",
@@ -6715,8 +6344,8 @@ var Accordion = function Accordion(_ref) {
   }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
 };
 
-var _templateObject$N;
-var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$H;
+var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 
 var Accordions = function Accordions(_ref) {
   var _ref$items = _ref.items,
@@ -6746,13 +6375,13 @@ var Theme = function Theme(_ref) {
   }, children);
 };
 
-var _templateObject$O, _templateObject2$y, _templateObject3$q;
-var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__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$I, _templateObject2$t, _templateObject3$k;
+var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 28px 0;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  @media ", " {\n    padding: 20px 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, devices.mobile);
-var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__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.div(_templateObject3$q || (_templateObject3$q = /*#__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.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  @media ", " {\n    align-items: flex-start;\n  }\n"])), devices.mobile);
+var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n  color: var(--base-color-white);\n  a {\n    color: var(--base-color-white);\n    text-decoration: underline;\n  }\n"])));
 
 /* eslint-disable react/no-danger */
 var AnnouncementBanner = function AnnouncementBanner(_ref) {
@@ -6790,8 +6419,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
   }))))));
 };
 
-var _templateObject$P;
-var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 20px;\n  border: none;\n  padding: 0;\n  font-family: var(--font-family-buttons);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n\n  .auxiliaryButtonIcon {\n    width: 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), function (_ref) {
+var _templateObject$J;
+var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 20px;\n  border: none;\n  padding: 0;\n  font-family: var(--font-family-buttons);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n\n  .auxiliaryButtonIcon {\n    width: 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), function (_ref) {
   var bgColor = _ref.bgColor,
     theme = _ref.theme;
   return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
@@ -6800,48 +6429,48 @@ var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$P || (_
   return color;
 });
 
-var _excluded$e = ["children"];
+var _excluded$b = ["children"];
 var AuxiliaryButton = function AuxiliaryButton(_ref) {
   var _props$color;
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
     color: (_props$color = props.color) != null ? _props$color : Colors.Black,
     iconClassName: "auxiliaryButtonIcon"
   }), children);
 };
 
-var _templateObject$Q, _templateObject2$z, _templateObject3$r, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject$K, _templateObject2$u, _templateObject3$l, _templateObject4$g, _templateObject5$c, _templateObject6$9, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
 var LENGTH_LARGE_TEXT = 28;
-var LENGTH_SMALL_TEXT$1 = 19;
+var LENGTH_SMALL_TEXT = 19;
 var LENGTH_TEXT_TABLET = 10;
-var CardContainer = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__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.div(_templateObject$K || (_templateObject$K = /*#__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.div(_templateObject2$z || (_templateObject2$z = /*#__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.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref3) {
   var lineColor = _ref3.lineColor,
     theme = _ref3.theme;
   if (lineColor === Colors.Cinema) return 'var(--base-color-white)';
   return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
 }, zIndexes.contentOverlay);
-var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
-var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__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.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
+var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__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$4 = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__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.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobileAndTablet);
-var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin-top: var(--editorial-spacing-hover);\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
-var HighlightTextContainer = /*#__PURE__*/styled(TextContainer$1)(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-primary);\n  margin-top: 4px;\n"])));
-var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref6) {
+var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+var TitleContainerMobile = /*#__PURE__*/styled.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.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin-top: var(--editorial-spacing-hover);\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
+var HighlightTextContainer = /*#__PURE__*/styled(TextContainer)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-primary);\n  margin-top: 4px;\n"])));
+var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$2 || (_templateObject9$2 = /*#__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.div(_templateObject10$2 || (_templateObject10$2 = /*#__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';
 }, devices.mobile, function (_ref7) {
@@ -6873,7 +6502,7 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14 || (_template
   var size = _ref13.size,
     primaryButtonTextLength = _ref13.primaryButtonTextLength,
     tertiaryButtonTextLength = _ref13.tertiaryButtonTextLength;
-  var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT$1 || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT$1 : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
+  var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
   if (isLinksLayoutColumn) {
     return "\n        flex-direction: column;\n      ";
   }
@@ -6951,11 +6580,11 @@ var truncateReactNodeString = function truncateReactNodeString(node, resultLengt
   return truncateHtmlString(nodeString, resultLength, addDots);
 };
 
-var _excluded$f = ["text"],
-  _excluded2$1 = ["text"];
+var _excluded$c = ["text"],
+  _excluded2 = ["text"];
 var _buttonTypeToButton;
 var LENGTH_LARGE_TEXT$1 = 28;
-var LENGTH_SMALL_TEXT$2 = 19;
+var LENGTH_SMALL_TEXT$1 = 19;
 var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = Button$1, _buttonTypeToButton);
 var Card = function Card(_ref) {
   var _labelParams$color;
@@ -6999,14 +6628,14 @@ var Card = function Card(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
-  var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+  var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$1) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
     secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
-  var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
+    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$1) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
   var hoverHandler = function hoverHandler(value) {
     if (value) {
       node.current.style.opacity = '1';
@@ -7062,11 +6691,11 @@ var Card = function Card(_ref) {
     fullWidth: fullWidth
   }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
     list: tags
-  }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, null, /*#__PURE__*/React__default.createElement(Header, {
+  }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$2, 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$1, {
+  }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer, {
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
@@ -7086,9 +6715,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$R, _templateObject2$A;
-var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$R || (_templateObject$R = /*#__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(GridItem)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
+var _templateObject$L, _templateObject2$v;
+var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$L || (_templateObject$L = /*#__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(GridItem)(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
 
 var Cards = function Cards(_ref) {
   var cards = _ref.cards,
@@ -7130,18 +6759,18 @@ var Cards = function Cards(_ref) {
   }));
 };
 
-var _templateObject$S, _templateObject2$B, _templateObject3$s, _templateObject4$l, _templateObject5$g;
-var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__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.div(_templateObject2$B || (_templateObject2$B = /*#__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$M, _templateObject2$w, _templateObject3$m, _templateObject4$h, _templateObject5$d;
+var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__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.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  padding: 30px 0;\n\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), function (_ref) {
   var hideBottomBorder = _ref.hideBottomBorder;
   return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
 }, function (_ref2) {
   var hideTopBorder = _ref2.hideTopBorder;
   return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
 }, devices.mobileAndTablet);
-var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__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.div(_templateObject5$g || (_templateObject5$g = /*#__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.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$h || (_templateObject4$h = /*#__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.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media ", " {\n    flex-direction: column;\n    margin: 4px 0;\n  }\n\n  a {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-decoration: underline;\n\n    &:before {\n      display: inline-block;\n      content: '';\n      background-color: var(--base-color-black);\n      width: 1px;\n      height: 18px;\n      margin: 0 8px -4px;\n\n      @media ", " {\n        display: none;\n      }\n    }\n\n    &:first-child:before {\n      display: none;\n    }\n  }\n"])), devices.mobile, devices.mobile);
 
 var divideAddressString = function divideAddressString(address) {
   return address.split(',').map(function (chunk, i) {
@@ -7170,7 +6799,7 @@ var ContactCard = function ContactCard(_ref) {
     columnSpanDesktop: 8,
     columnStartDevice: 1,
     columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(Wrapper$4, {
+  }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
     "data-testid": "contact-card-wrapper",
     hideBottomBorder: hideBottomBorder,
     hideTopBorder: hideTopBorder
@@ -7198,18 +6827,18 @@ var ContactCard = function ContactCard(_ref) {
   }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
 };
 
-var _templateObject$T, _templateObject2$C, _templateObject3$t, _templateObject4$m, _templateObject5$h, _templateObject6$e, _templateObject7$8;
-var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 24px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
+var _templateObject$N, _templateObject2$x, _templateObject3$n, _templateObject4$i, _templateObject5$e, _templateObject6$a, _templateObject7$5;
+var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 24px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
   return props.clickable ? 'pointer' : 'default';
 }, devices.mobile);
-var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
-var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  gap: 22px;\n\n  & > * {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  @media ", " {\n    margin: 0 20px;\n    gap: 12px;\n  }\n\n  & .content-summary-text-link {\n    height: unset;\n  }\n"])), function (props) {
+var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
+var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__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.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin: 0;\n  }\n\n  @media ", " {\n    & > * {\n      font-size: var(--font-size-header-5);\n      font-weight: var(--font-weight-header-5);\n    }\n  }\n"])), devices.mobile);
-var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n"])));
-var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & p:not(:last-child):after {\n    content: '\\A\\A';\n    white-space: pre;\n  }\n\n  ", "\n"], ["\n  & p:not(:last-child):after {\n    content: '\\\\A\\\\A';\n    white-space: pre;\n  }\n\n  ", "\n"])), function (props) {
+var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin: 0;\n  }\n\n  @media ", " {\n    & > * {\n      font-size: var(--font-size-header-5);\n      font-weight: var(--font-weight-header-5);\n    }\n  }\n"])), devices.mobile);
+var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n"])));
+var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & p:not(:last-child):after {\n    content: '\\A\\A';\n    white-space: pre;\n  }\n\n  ", "\n"], ["\n  & p:not(:last-child):after {\n    content: '\\\\A\\\\A';\n    white-space: pre;\n  }\n\n  ", "\n"])), function (props) {
   return !!props.truncate && "\n    overflow: hidden;\n    position: relative;\n    display: -webkit-box;\n    -webkit-line-clamp: " + props.truncate + ";\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    min-height: 1em;\n    max-height: 3em;\n  ";
 });
 
@@ -7281,21 +6910,21 @@ var ContentSummary = function ContentSummary(_ref) {
   }), link.text))));
 };
 
-var _templateObject$U, _templateObject2$D, _templateObject3$u, _templateObject4$n, _templateObject5$i;
-var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__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$O, _templateObject2$y, _templateObject3$o, _templateObject4$j, _templateObject5$f;
+var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__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.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-self: center;\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
+var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-self: center;\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__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.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var EditorialText = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__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.span(_templateObject4$j || (_templateObject4$j = /*#__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.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
 
 var Editorial = function Editorial(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -7326,10 +6955,10 @@ var Editorial = function Editorial(_ref) {
   })))));
 };
 
-var _templateObject$V, _templateObject2$E, _templateObject3$v, _templateObject4$o, _templateObject5$j;
-var InfoContent = /*#__PURE__*/styled('div')(_templateObject$V || (_templateObject$V = /*#__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('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
-var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 32px 0;\n\n  ", "}\n"])), function (props) {
+var _templateObject$P, _templateObject2$z, _templateObject3$p, _templateObject4$k, _templateObject5$g;
+var InfoContent = /*#__PURE__*/styled('div')(_templateObject$P || (_templateObject$P = /*#__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('div')(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
+var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 32px 0;\n\n  ", "}\n"])), function (props) {
   if (!props.infoThemed) {
     return '';
   }
@@ -7338,12 +6967,12 @@ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_template
   }
   return "a {\n            color: var(--base-color-white);\n            background: var(--base-color-transparent});\n          }\n            svg > path {\n              fill: var(--base-color-white);\n              stroke: var(--base-color-white);\n              stroke-width: 1;\n            }\n          ";
 });
-var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: ", ";\n  background: ", "\n  }};\n"])), function (props) {
+var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: ", ";\n  background: ", "\n  }};\n"])), function (props) {
   return props.background !== IInformationBackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
 }, function (props) {
   return "var(--base-color-" + props.background + ")";
 });
-var InfoBodyWrapper = /*#__PURE__*/styled('div')(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), function (props) {
+var InfoBodyWrapper = /*#__PURE__*/styled('div')(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), function (props) {
   return props.background === IInformationBackgroundColour.White ? 'var(--base-color-black)' : 'var(--base-color-white)';
 });
 
@@ -7488,29 +7117,29 @@ var Information = function Information(_ref) {
   })))));
 };
 
-var _templateObject$W, _templateObject2$F, _templateObject3$w, _templateObject4$p, _templateObject5$k, _templateObject6$f, _templateObject7$9, _templateObject8$7;
-var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  // remove spacing above/below for all semantic levels of the title\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+var _templateObject$Q, _templateObject2$A, _templateObject3$q, _templateObject4$l, _templateObject5$h, _templateObject6$b, _templateObject7$6, _templateObject8$4;
+var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  // remove spacing above/below for all semantic levels of the title\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
   var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    padding-bottom: 42px;\n  ";
 }, devices.mobile);
-var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
-var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__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(Grid)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
+var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
   var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin-top: 42px;\n  ";
 }, devices.mobile);
-var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 43px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 33px;\n      margin-top: 10px;\n      margin-bottom: 20px;\n    }\n  }\n"])), function (_ref4) {
+var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 43px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 33px;\n      margin-top: 10px;\n      margin-bottom: 20px;\n    }\n  }\n"])), function (_ref4) {
   var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
 }, devices.mobile);
-var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
-var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
-var ButtonWrapper$1 = /*#__PURE__*/styled.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.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 TextWrapper = /*#__PURE__*/styled.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$1 = /*#__PURE__*/styled.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.div(_templateObject7$6 || (_templateObject7$6 = /*#__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.div(_templateObject8$4 || (_templateObject8$4 = /*#__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"];
+var _excluded$d = ["text"];
 var PageHeading = function PageHeading(_ref) {
   var title = _ref.title,
     text = _ref.text,
@@ -7526,7 +7155,7 @@ var PageHeading = function PageHeading(_ref) {
     titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
   var _ref2 = link || {},
     linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
   var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
   var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
   var isTitleUnAvailable = !title;
@@ -7554,10 +7183,10 @@ var PageHeading = function PageHeading(_ref) {
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
 };
 
-var _excluded$h = ["link"];
+var _excluded$e = ["link"];
 var PageHeadingCore = function PageHeadingCore(_ref) {
   var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var coreLink = link && _extends({}, link, {
     color: Colors.White,
     bgColor: Colors.Black
@@ -7569,10 +7198,10 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
   })));
 };
 
-var _excluded$i = ["link"];
+var _excluded$f = ["link"];
 var PageHeadingCinema = function PageHeadingCinema(_ref) {
   var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var cinemaLink = link && _extends({}, link, {
     color: Colors.Black,
     bgColor: Colors.White
@@ -7586,17 +7215,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   })));
 };
 
-var _templateObject$X, _templateObject2$G, _templateObject3$x, _templateObject4$q, _templateObject5$l, _templateObject6$g, _templateObject7$a, _templateObject8$8;
-var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__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.div(_templateObject2$G || (_templateObject2$G = /*#__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(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.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$2 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
-var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var ButtonWrapper$2 = /*#__PURE__*/styled.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.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 _templateObject$R, _templateObject2$B, _templateObject3$r, _templateObject4$m, _templateObject5$i, _templateObject6$c, _templateObject7$7, _templateObject8$5;
+var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  position: relative;\n  display: flex;\n  background: var(--base-color-black);\n\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n  }\n"])), devices.mobile);
+var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  img {\n    width: 100%;\n    filter: brightness(0.7);\n    opacity: 0.95;\n  }\n\n  @media ", " {\n    height: fit-content;\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n\n    img {\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n"])), devices.mobile);
+var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$r || (_templateObject3$r = /*#__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.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
+var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
+var TextWrapper$1 = /*#__PURE__*/styled.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.div(_templateObject7$7 || (_templateObject7$7 = /*#__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.div(_templateObject8$5 || (_templateObject8$5 = /*#__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"];
+var _excluded$g = ["text"];
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
     text = _ref.text,
@@ -7614,7 +7243,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var truncatedText = text == null ? void 0 : text.substring(0, 75);
   var _ref2 = link || {},
     linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
     bgUrlDevice: bgUrlDevice,
@@ -7659,21 +7288,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, "Scroll Down"))) : null);
 };
 
-var _templateObject$Y, _templateObject2$H, _templateObject3$y, _templateObject4$r, _templateObject5$m;
-var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$Y || (_templateObject$Y = /*#__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$S, _templateObject2$C, _templateObject3$s, _templateObject4$n, _templateObject5$j;
+var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
   var color = _ref.color;
   return "\n    background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n    color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n  ";
 }, devices.mobileAndTablet);
-var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__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.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0px 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
   var 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.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$1 = /*#__PURE__*/styled.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.div(_templateObject5$m || (_templateObject5$m = /*#__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.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--base-color-black);\n\n  @media ", " {\n    grid-area: 2 / 1 / 3 / 15;\n  }\n"])), devices.mobileAndTablet);
+var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px;\n  max-height: 33vw;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
+var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 
 var PageHeadingPanel = function PageHeadingPanel(_ref) {
   var _image$src, _image$alt;
@@ -7703,13 +7332,13 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
   })))));
 };
 
-var _templateObject$Z;
-var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
+var _templateObject$T;
+var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
 
-var _excluded$k = ["link"];
+var _excluded$h = ["link"];
 var PageHeadingStream = function PageHeadingStream(_ref) {
   var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var streamLink = link && _extends({}, link, {
     color: Colors.Black,
     bgColor: Colors.White
@@ -7723,12 +7352,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }))));
 };
 
-var _templateObject$_, _templateObject2$I, _templateObject3$z, _templateObject5$n, _templateObject6$h, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
-var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
-var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__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.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
-var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__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(Grid)(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$U, _templateObject2$D, _templateObject3$t, _templateObject5$k, _templateObject6$d, _templateObject7$8, _templateObject8$6, _templateObject9$3, _templateObject10$3;
+var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
+var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
+var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
+var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: 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(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\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
   var invert = _ref.invert,
     theme = _ref.theme;
   return invert ? theme.colors.white : theme.colors.primary;
@@ -7744,10 +7373,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$h || (
   var theme = _ref4.theme;
   return theme.colors.primary === theme.colors.stream && "\n      color: " + theme.colors.stream + ";\n      background-color: " + theme.colors.white + ";\n    ";
 }, devices.tablet, devices.mobile);
-var CompactHeaderLogoWrapper = /*#__PURE__*/styled.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.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.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(PrimaryButton)(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
+var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__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.div(_templateObject8$6 || (_templateObject8$6 = /*#__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.div(_templateObject9$3 || (_templateObject9$3 = /*#__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(PrimaryButton)(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
   var invert = _ref5.invert,
     theme = _ref5.theme;
   return invert ? theme.colors.primary : theme.colors.white;
@@ -7836,74 +7465,27 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
 
-// WARNING: Do not use this on server side rendering, it may throw an error.
-var isIOS = function isIOS() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof navigator === undefined) return false;
-    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
-    // iPad on iOS 13 detection
-    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
-  } catch (e) {
-    console.warn('Error checking if device is iOS.', e);
-    return false;
-  }
-};
-// React hook version of isIOS (for server side rendering)
-var useIOS = function useIOS() {
-  var _useState = useState(false),
-    IOS = _useState[0],
-    setIOS = _useState[1];
+var _excluded$i = ["text"];
+var useResponsiveVideo = function useResponsiveVideo(video, poster) {
+  var mobileVideo = video.mobile || video.desktop;
+  var desktopVideo = video.desktop || video.mobile;
+  var mobilePoster = poster.mobile || poster.desktop;
+  var desktopPoster = poster.desktop || poster.mobile;
+  var _useState = useState(desktopPoster),
+    posterUrl = _useState[0],
+    setPoster = _useState[1];
+  var _useState2 = useState(desktopVideo),
+    videoUrl = _useState2[0],
+    setVideoUrl = _useState2[1];
+  var isMobile = useMobile();
   useEffect(function () {
-    if (typeof navigator === undefined) return;
-    setIOS(isIOS());
-  }, []);
-  return IOS;
-};
-// Checks device size based on window width
-var isMobile = function isMobile() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof window === undefined) return false;
-    return window.innerWidth < breakpoints.sm;
-  } catch (e) {
-    console.warn('Error checking if device is mobile.', e);
-    return false;
-  }
-};
-// React hook version of isMobile (for server side rendering)
-var useMobile = function useMobile() {
-  var _useState2 = useState(false),
-    mobile = _useState2[0],
-    setMobile = _useState2[1];
-  useEffect(function () {
-    if (typeof window === undefined) return;
-    setMobile(isMobile());
-  }, []);
-  return mobile;
-};
-
-var _excluded$l = ["text"];
-var useResponsiveVideo = function useResponsiveVideo(video, poster) {
-  var mobileVideo = video.mobile || video.desktop;
-  var desktopVideo = video.desktop || video.mobile;
-  var mobilePoster = poster.mobile || poster.desktop;
-  var desktopPoster = poster.desktop || poster.mobile;
-  var _useState = useState(desktopPoster),
-    posterUrl = _useState[0],
-    setPoster = _useState[1];
-  var _useState2 = useState(desktopVideo),
-    videoUrl = _useState2[0],
-    setVideoUrl = _useState2[1];
-  var isMobile = useMobile();
-  useEffect(function () {
-    setPoster(isMobile ? mobilePoster : desktopPoster);
-    setVideoUrl(isMobile ? mobileVideo : desktopVideo);
-  }, [isMobile]);
-  return {
-    posterUrl: posterUrl,
-    videoUrl: videoUrl
-  };
+    setPoster(isMobile ? mobilePoster : desktopPoster);
+    setVideoUrl(isMobile ? mobileVideo : desktopVideo);
+  }, [isMobile]);
+  return {
+    posterUrl: posterUrl,
+    videoUrl: videoUrl
+  };
 };
 var VideoWithControls = function VideoWithControls(_ref) {
   var video = _ref.video,
@@ -7990,7 +7572,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$i);
   var titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
     elementId: 'compact-header-video',
@@ -8028,15 +7610,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   }), linkText))))));
 };
 
-var _templateObject$$, _templateObject2$J, _templateObject3$A, _templateObject4$s;
-var MorePages = /*#__PURE__*/styled.span(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
-var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 40px;\n  margin-bottom: 40px;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0);\n  }\n"])));
+var _templateObject$V, _templateObject2$E, _templateObject3$u, _templateObject4$o;
+var MorePages = /*#__PURE__*/styled.span(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
+var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 40px;\n  margin-bottom: 40px;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0);\n  }\n"])));
 // PageNumber extends bodyText but uses subtitle-1 font size
-var PageNumber = /*#__PURE__*/styled.a(_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 PageNumber = /*#__PURE__*/styled.a(_templateObject3$u || (_templateObject3$u = /*#__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(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 NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
 
 var reducePages = function reducePages(pages, currentPage) {
   // If there are less than 6 pages, return all pages
@@ -8102,14 +7684,14 @@ var Pagination = function Pagination(_ref) {
   })))));
 };
 
-var _templateObject$10, _templateObject2$K, _templateObject3$B, _templateObject4$t, _templateObject5$o, _templateObject6$i, _templateObject7$c;
-var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$10 || (_templateObject$10 = /*#__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.div(_templateObject2$K || (_templateObject2$K = /*#__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.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.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.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
-var PersonLink = /*#__PURE__*/styled.a(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
-var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var _templateObject$W, _templateObject2$F, _templateObject3$v, _templateObject4$p, _templateObject5$l, _templateObject6$e, _templateObject7$9;
+var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
+var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
+var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
+var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
+var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
+var PersonLink = /*#__PURE__*/styled.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 ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
 
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -8166,14 +7748,14 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$11, _templateObject2$L, _templateObject3$C, _templateObject4$u;
-var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
-var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
+var _templateObject$X, _templateObject2$G, _templateObject3$w, _templateObject4$q;
+var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
   var columnCount = _ref.columnCount;
   return "repeat(" + columnCount + ", 1fr)";
 }, devices.mobile, devices.tablet);
-var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
-var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
+var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
 
 // Get the total character length of a property in an array of objects
 var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -8248,14 +7830,30 @@ var CreditListing = function CreditListing(_ref) {
   }));
 };
 
-var _templateObject$12, _templateObject2$M, _templateObject3$D, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject$Y;
+var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 4px;\n\n  @media ", " {\n    margin-bottom: 8px;\n  }\n\n  @media ", " {\n    margin-bottom: 0;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])), devices.tablet, devices.mobile);
+
+var PolicyLinks = function PolicyLinks(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, items.map(function (link, idx) {
+    return /*#__PURE__*/React__default.createElement(PolicyLinksTextLinkWrapper, {
+      key: link.href + "-" + idx,
+      target: link.href,
+      href: link.href,
+      "data-roh": link.dataRoh,
+      "aria-label": "Policy link: " + link.title
+    }, link.title);
+  }));
+};
+
+var _templateObject$Z, _templateObject2$H, _templateObject3$x, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$a, _templateObject8$7, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _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(Grid)(_templateObject$12 || (_templateObject$12 = /*#__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(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
 }, devices.tablet, function (_ref2) {
@@ -8265,8 +7863,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templa
   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.span(_templateObject2$M || (_templateObject2$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 PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__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.span(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.black;
 }, function (_ref5) {
@@ -8276,7 +7874,7 @@ var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$D || (_template
   var theme = _ref6.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__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.div(_templateObject4$r || (_templateObject4$r = /*#__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) {
@@ -8300,15 +7898,15 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$v || (_templat
   }
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref10) {
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref10) {
   var marginBottom = _ref10.marginBottom;
   return marginBottom + "px";
 });
-var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
-var TextLinksContainer = /*#__PURE__*/styled.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.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.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.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 PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
+var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
+var TextLinkWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
+var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templateObject9$4 = /*#__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.div(_templateObject10$4 || (_templateObject10$4 = /*#__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.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
@@ -8333,8 +7931,8 @@ var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject19 || (_temp
 var TimerWrapper$1 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
 var EndDateText = /*#__PURE__*/styled.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid var(--base-color-black);\n  padding-bottom: 32px;\n  margin-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 20px;\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
 
-var _excluded$m = ["text"],
-  _excluded2$2 = ["text"],
+var _excluded$j = ["text"],
+  _excluded2$1 = ["text"],
   _excluded3 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_TEXT$1 = 28;
@@ -8395,13 +7993,13 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
     secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
+    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
   var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
   var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
   var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
@@ -8410,7 +8008,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
     var _link$text = link.text,
       textLinkText = _link$text === void 0 ? '' : _link$text,
       restTextLink = _objectWithoutPropertiesLoose(link, _excluded3);
-    return /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
+    return /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, {
       key: index
     }, /*#__PURE__*/React__default.createElement(PromoWithTagsTextLink, Object.assign({}, restTextLink), textLinkText));
   }) : null;
@@ -8508,27 +8106,27 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$13, _templateObject2$N, _templateObject3$E, _templateObject4$w, _templateObject5$q, _templateObject6$k, _templateObject7$e;
+var _templateObject$_, _templateObject2$I, _templateObject3$y, _templateObject4$s, _templateObject5$n, _templateObject6$g, _templateObject7$b;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
+var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
 }, devices.tablet, function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
 }, devices.mobile);
-var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__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.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__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.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__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.span(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__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.div(_templateObject4$s || (_templateObject4$s = /*#__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.span(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.black;
 }, function (_ref6) {
@@ -8538,7 +8136,7 @@ var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$k || (_templat
   var theme = _ref7.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$3 = /*#__PURE__*/styled.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 ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__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,
@@ -8560,8 +8158,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$e || (_templat
   return '';
 });
 
-var _templateObject$14;
-var VideoContainer = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$$;
+var VideoContainer = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -8686,8 +8284,8 @@ var PromoChild = function PromoChild(_ref) {
   }));
 };
 
-var _excluded$n = ["text"],
-  _excluded2$3 = ["text"];
+var _excluded$k = ["text"],
+  _excluded2$2 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -8711,13 +8309,13 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
     _ref3$text = _ref3.text,
     tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-    restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
+    restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
   var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
   var defaultVideoSettings = {
     muted: true,
@@ -8752,8 +8350,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$15;
-var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
+var _templateObject$10;
+var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
 
 /**
  * DEPRECATED. Use RadioGroup2 instead
@@ -8808,9 +8406,9 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var _templateObject$16, _templateObject2$O, _templateObject3$F;
-var Container$3 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
+var _templateObject$11, _templateObject2$J, _templateObject3$z;
+var Container$3 = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
   var horizontalMode = _ref.horizontalMode;
   if (horizontalMode) return 'row';
   return 'column';
@@ -8818,7 +8416,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObjec
   var gap = _ref2.gap;
   return gap + "px";
 });
-var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
+var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
   var darkMode = _ref3.darkMode;
   if (darkMode) return 'var(--base-color-white)';
   return 'var(--base-color-errorstate)';
@@ -8895,10 +8493,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
   }, error))));
 };
 
-var _templateObject$17, _templateObject2$P, _templateObject3$G;
-var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-lightgrey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
-var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.3s ease-in-out;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n"])));
-var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
+var _templateObject$12, _templateObject2$K, _templateObject3$A;
+var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-lightgrey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
+var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.3s ease-in-out;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n"])));
+var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
 
 /* eslint-disable react/no-danger */
 var StatusBanner = function StatusBanner(_ref) {
@@ -8954,8 +8552,8 @@ var StatusBanner = function StatusBanner(_ref) {
   return null;
 };
 
-var _templateObject$18;
-var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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$13;
+var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__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,
@@ -8983,8 +8581,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description)))));
 };
 
-var _templateObject$19, _templateObject2$Q, _templateObject3$H, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
-var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /*#__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$14, _templateObject2$L, _templateObject3$B, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject10$5, _templateObject11$3;
+var stateStyles = /*#__PURE__*/css(_templateObject$14 || (_templateObject$14 = /*#__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) {
@@ -8994,12 +8592,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /
   var theme = _ref3.theme;
   return theme.colors.lightgrey;
 });
-var borderStyles = /*#__PURE__*/css(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
+var borderStyles = /*#__PURE__*/css(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.darkgrey;
 });
-var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var listItemStyles = /*#__PURE__*/css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
+var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var listItemStyles = /*#__PURE__*/css(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
 var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
   var theme = _ref5.theme;
   return {
@@ -9007,11 +8605,11 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
     color: theme.colors.black,
     title: 'Select Arrow'
   };
-})(_templateObject5$r || (_templateObject5$r = /*#__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.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
-var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
-var Options = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
-var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
+})(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n\n  max-width: 24px;\n  max-height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
+var Wrapper$3 = /*#__PURE__*/styled.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.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
+var Options = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
+var Option = /*#__PURE__*/styled.li(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
   var theme = _ref6.theme,
     hover = _ref6.hover;
   var _theme$colors = theme.colors,
@@ -9021,7 +8619,7 @@ var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 =
   return "\n        background-color: " + lightgrey + ";\n        &:hover { background-color: " + midgrey + " }\n    ";
 });
 var selectStyles = function selectStyles(width, height) {
-  return css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  * {\n    width: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    top: ", ";\n  }\n  ", " {\n    height: ", ";\n  }\n  p {\n    height: ", ";\n    padding-inline: 20px;\n\n    display: flex;\n    align-items: center;\n  }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
+  return css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  * {\n    width: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    top: ", ";\n  }\n  ", " {\n    height: ", ";\n  }\n  p {\n    height: ", ";\n    padding-inline: 20px;\n\n    display: flex;\n    align-items: center;\n  }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
 };
 var SelectList = /*#__PURE__*/styled.ul(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  & ", " {\n    position: absolute;\n\n    top: 13px;\n    right: 16px;\n  }\n"])), function (_ref7) {
   var width = _ref7.width,
@@ -9317,7 +8915,7 @@ function Select(_ref3) {
     }
     setSelectedValue(options[0]);
   }, [options, resetWhenOptionsUpdate]);
-  return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$3, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
     level: 1,
     tag: "p",
     "data-testid": "select-label"
@@ -9364,9 +8962,9 @@ function Select(_ref3) {
   })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$1a, _templateObject2$R, _templateObject3$I, _templateObject4$y;
-var Container$4 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-darkgrey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-darkgrey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-lightgrey);\n      background: var(--base-color-lightgrey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-darkgrey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-darkgrey);\n    background: var(--base-color-lightgrey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-midgrey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-size: var(--font-size-body-1);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
+var _templateObject$15, _templateObject2$M, _templateObject3$C, _templateObject4$u;
+var Container$4 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-darkgrey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-darkgrey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-lightgrey);\n      background: var(--base-color-lightgrey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-darkgrey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-darkgrey);\n    background: var(--base-color-lightgrey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-midgrey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-size: var(--font-size-body-1);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + "px";
@@ -9383,18 +8981,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateOb
   if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
   return "0 0 0 3px var(--base-color-lapislazuli)";
 });
-var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
+var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
   var darkMode = _ref5.darkMode;
   if (darkMode) return "var(--base-color-white)";
   return "var(--base-color-black)";
 });
-var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
+var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
   var darkMode = _ref6.darkMode;
   if (darkMode) return "var(--base-color-white)";
   return "var(--base-color-errorstate)";
 });
 
-var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
+var _excluded$l = ["label", "error", "width", "darkMode", "isSearchable", "components"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -9445,7 +9043,7 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -9463,7 +9061,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
 
-var _excluded$p = ["label", "error", "width", "darkMode", "components"];
+var _excluded$m = ["label", "error", "width", "darkMode", "components"];
 /**
  * The Select2Async component is similar to Select 2, but uses react-select async
  * component for select instead of regular react-select component. This can be used
@@ -9485,7 +9083,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     components = _ref.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -9502,8 +9100,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
   })));
 };
 
-var _templateObject$1b;
-var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__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 _templateObject$16;
+var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__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;
 });
@@ -9524,15 +9122,95 @@ var TextOnly = function TextOnly(_ref) {
     columnSpanDesktop: columnSpanDesktop,
     columnStartDevice: columnStartDevice,
     columnSpanDevice: columnSpanDevice
-  }, /*#__PURE__*/React__default.createElement(TextContainer$2, {
+  }, /*#__PURE__*/React__default.createElement(TextContainer$1, {
     dangerouslySetInnerHTML: {
       __html: text
     }
   })));
 };
 
-var _templateObject$1c, _templateObject2$S;
-var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 12px - var(--line-height-body-2));\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), ImageAspectRatioWrapper, function (_ref) {
+var _templateObject$17, _templateObject2$N, _templateObject3$D, _templateObject4$v, _templateObject5$p, _templateObject6$i, _templateObject7$d, _templateObject8$9;
+var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__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.div(_templateObject2$N || (_templateObject2$N = /*#__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.div(_templateObject3$D || (_templateObject3$D = /*#__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:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    '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;
+}, Colors.White);
+var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n"])));
+var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
+var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
+var PriceRow = /*#__PURE__*/styled.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n  padding: 5px 0 8px 0;\n"])));
+var LineThrough = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--base-color-darkgrey);\n"])));
+
+/* eslint-disable react/no-danger */
+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 : ''
+    }
+  })));
+};
+
+// Set max. character length
+var setMaxCharLength = function setMaxCharLength(value, maxLength) {
+  return value.slice(0, maxLength);
+};
+// Format price to contain £ if not already present
+var formatPrice = function formatPrice(value) {
+  if (Number.isNaN(Number(value))) return value != null ? value : '';
+  return "\xA3" + Number(value).toFixed(2);
+};
+
+var LENGTH_SMALL_TEXT$2 = 19;
+var OFFER_TEXTS_LIMIT = 3;
+var FLAG_CHAR_LIMIT = 30;
+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 ? ThemeType.Core : _ref$theme;
+  var truncate = function truncate(str, n) {
+    return str.length >= n ? str.slice(0, n) : str;
+  };
+  var reducedOfferTexts = offerTexts == null ? void 0 : offerTexts.slice(0, OFFER_TEXTS_LIMIT);
+  return /*#__PURE__*/React__default.createElement(Theme, {
+    theme: theme
+  }, /*#__PURE__*/React__default.createElement(Wrapper$4, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabelWrapper, null, /*#__PURE__*/React__default.createElement(PromoLabel, null, setMaxCharLength(flag, FLAG_CHAR_LIMIT)))), /*#__PURE__*/React__default.createElement(TitleContainer$3, 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, {
+      key: offerText.title,
+      title: offerText.title,
+      description: offerText.description
+    });
+  }), link && (/*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT$2))))));
+};
+
+var _templateObject$18, _templateObject2$O;
+var Wrapper$5 = /*#__PURE__*/styled.figure(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 12px - var(--line-height-body-2));\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -9542,7 +9220,7 @@ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1
     height = _ref2.height;
   return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
 });
-var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 12px;\n  height: var(--line-height-body-2);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-2);\n  font-weight: var(--font-weight-body-2);\n  letter-spacing: var(--letter-spacing-body-2);\n  line-height: var(--line-height-body-2);\n  text-transform: var(--text-transform-body-2);\n  word-break: var(--word-break-body-2);\n  font-style: italic;\n"])));
+var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$O || (_templateObject2$O = /*#__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,
@@ -9557,30 +9235,32 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
       var _wrapperRef$current;
       return setHeight((wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
     };
+    setWrapperHeight(); // Initial height calculation
     window.addEventListener('resize', setWrapperHeight);
-    if (wrapperRef) {
-      setWrapperHeight();
-    }
     return function () {
       return window.removeEventListener('resize', setWrapperHeight);
     };
-  }, [wrapperRef]);
-  return /*#__PURE__*/React__default.createElement(Wrapper$6, {
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Wrapper$5, {
     aspectRatio: aspectRatio,
     ref: wrapperRef,
     height: height
   }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: aspectRatio
-  }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
+  }, React__default.Children.map(children, function (child) {
+    return /*#__PURE__*/React__default.isValidElement(child) ? /*#__PURE__*/React__default.cloneElement(child, {
+      alt: child.props.alt || 'Visual representation'
+    }) : child;
+  })), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
 };
 
-var _templateObject$1d, _templateObject2$T, _templateObject3$J;
-var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
-var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$19, _templateObject2$P, _templateObject3$E;
+var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
 });
-var Line$1 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__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.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  height: 2px;\n  width: 62px;\n  margin: 32px 0;\n\n  @media ", " {\n    height: 1px;\n    width: 46px;\n    margin: 24px 0;\n  }\n"])), devices.mobile);
 
 /* eslint-disable react/no-danger */
 var Quote = function Quote(_ref) {
@@ -9605,13 +9285,13 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$1e, _templateObject2$U, _templateObject3$K, _templateObject4$z, _templateObject5$s, _templateObject6$m;
-var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
-var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
-var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
+var _templateObject$1a, _templateObject2$Q, _templateObject3$F, _templateObject4$w, _templateObject5$q, _templateObject6$j;
+var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
+var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var StyledImage = /*#__PURE__*/styled.img(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
+var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
 
 var MiniCard = function MiniCard(_ref) {
   var _ref$title = _ref.title,
@@ -9649,18 +9329,18 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$1f, _templateObject2$V, _templateObject3$L, _templateObject4$A, _templateObject5$t;
-var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
-var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
-var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
+var _templateObject$1b, _templateObject2$R, _templateObject3$G, _templateObject4$x, _templateObject5$r;
+var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
+var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
+var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
   var isVisible = _ref.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
+var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
   var isVisible = _ref2.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n"])));
+var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n"])));
 
 var keyDown = function keyDown(e, toggleFunction) {
   if (e.key === 'Enter' || e.key === 'Space') {
@@ -9741,15 +9421,15 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
 
-var _templateObject$1g, _templateObject2$W, _templateObject3$M, _templateObject4$B, _templateObject5$u;
-var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), Colors.LightGrey);
-var MobileButton = /*#__PURE__*/styled.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
-var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), Colors.Black, function (_ref) {
+var _templateObject$1c, _templateObject2$S, _templateObject3$H, _templateObject4$y, _templateObject5$s;
+var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled.ul(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), Colors.LightGrey);
+var MobileButton = /*#__PURE__*/styled.button(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
+var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), Colors.Black, function (_ref) {
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
 }, Colors.MidGrey);
-var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
+var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
   var isOpen = _ref2.isOpen;
   return isOpen ? 'block' : 'none';
 }, Colors.White, Colors.DarkGrey, MenuItem$1);
@@ -9905,19 +9585,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1h, _templateObject2$X, _templateObject3$N, _templateObject4$C, _templateObject5$v, _templateObject6$n;
-var Container$5 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
-var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$1d, _templateObject2$T, _templateObject3$I, _templateObject4$z, _templateObject5$t, _templateObject6$k;
+var Container$5 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Sections = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Section = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
   var color = _ref.color;
   return "var(--base-color-" + color + ")";
 });
-var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
-var Text = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+var BottomLine = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
+var Text = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
 });
-var LabelText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
+var LabelText = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
   var color = _ref3.color;
   return "var(--base-color-" + color + ")";
 });
@@ -9999,28 +9679,28 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1i, _templateObject2$Y, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$o, _templateObject7$g, _templateObject8$c, _templateObject9$7, _templateObject10$7;
-var TableContainer = /*#__PURE__*/styled.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
-var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
-var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var TableHeader = /*#__PURE__*/styled.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
+var _templateObject$1e, _templateObject2$U, _templateObject3$J, _templateObject4$A, _templateObject5$u, _templateObject6$l, _templateObject7$e, _templateObject8$a, _templateObject9$6, _templateObject10$6;
+var TableContainer = /*#__PURE__*/styled.table(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var Container$6 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
+var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var TableHeader = /*#__PURE__*/styled.th(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
   return "var(--base-color-" + props.lineColor + ")";
 }, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
-var TableCell = /*#__PURE__*/styled.td(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n  border-bottom: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
+var TableCell = /*#__PURE__*/styled.td(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n  border-bottom: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
   return "var(--base-color-" + props.lineColor + ")";
 }, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.mobile);
-var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: none;\n  }\n"])));
-var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
+var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: none;\n  }\n"])));
+var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   return active === 'true' && "\n      color: var(--base-color-core);\n      border-bottom: 1px solid var(--base-color-core);\n    ";
 });
-var Next = /*#__PURE__*/styled.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
-var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
-var AriaDescription$1 = /*#__PURE__*/styled.span(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
+var Next = /*#__PURE__*/styled.span(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
+var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
+var AriaDescription$1 = /*#__PURE__*/styled.span(_templateObject10$6 || (_templateObject10$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 /* eslint-disable react/no-danger */
 var Content = function Content(_ref) {
@@ -10098,111 +9778,488 @@ var Table = function Table(_ref) {
         setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
       }
     };
-    horizontalScroll();
-    window.addEventListener('resize', horizontalScroll);
+    horizontalScroll();
+    window.addEventListener('resize', horizontalScroll);
+    return function () {
+      return window.removeEventListener('resize', horizontalScroll);
+    };
+  }, []);
+  var totalRows = Array.isArray(children) ? children.length + 1 : 1;
+  var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
+  var pageNumbers = Array.from({
+    length: totalPages
+  }, function (_, i) {
+    return i;
+  });
+  var reducedPageNumbers = reducePages(pageNumbers, currentPage);
+  var currentRows;
+  if (pagination) {
+    if (Array.isArray(children)) {
+      currentRows = children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage);
+    } else {
+      currentRows = [];
+    }
+  } else {
+    currentRows = children;
+  }
+  var visibleRows;
+  if (pagination) {
+    visibleRows = Array.isArray(currentRows) ? currentRows.length + 1 : 0;
+  } else {
+    visibleRows = totalRows;
+  }
+  return /*#__PURE__*/React__default.createElement(Wrapper$6, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    onClickPrev: function onClickPrev() {
+      return scrollTable(tableRef, 'left');
+    },
+    onClickNext: function onClickNext() {
+      return scrollTable(tableRef, 'right');
+    }
+  }))), /*#__PURE__*/React__default.createElement(Container$6, {
+    role: "table",
+    tabIndex: 0,
+    ref: tableRef,
+    "aria-rowcount": totalRows,
+    "aria-colcount": columns
+  }, /*#__PURE__*/React__default.createElement(AriaDescription$1, {
+    id: "table-description"
+  }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, ' ', /*#__PURE__*/React__default.createElement("tr", {
+    role: "columnheader"
+  }, headings == null ? void 0 : headings.map(function (heading, index) {
+    return /*#__PURE__*/React__default.createElement(TableHeader, {
+      key: index,
+      role: "columnheader",
+      scope: "col",
+      columns: columns,
+      lineColor: lineColor
+    }, /*#__PURE__*/React__default.createElement(Content, {
+      content: heading
+    }));
+  }))), /*#__PURE__*/React__default.createElement("tbody", null, ' ', Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
+    return /*#__PURE__*/React__default.createElement(Row, {
+      key: rowIndex,
+      row: row,
+      rowIndex: rowIndex,
+      columns: columns,
+      lineColor: lineColor
+    });
+  }))), pagination && totalPages > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription$1, {
+    id: "pagination-description"
+  }, "Table pagination: current page ", currentPage + 1, " of ", totalPages), /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+    key: "previous-page",
+    onClick: function onClick() {
+      return setCurrentPage(currentPage - 1);
+    },
+    tabIndex: 0,
+    "aria-label": "Previous page"
+  }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "DropdownArrow",
+    direction: "down"
+  }))))), currentPage > 2 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+    key: "more-before"
+  }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), reducedPageNumbers.map(function (number) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: number
+    }, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+      key: number,
+      onClick: function onClick() {
+        return setCurrentPage(number);
+      },
+      tabIndex: 0,
+      active: "" + (number === currentPage)
+    }, number + 1));
+  }), currentPage + 4 < totalPages && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+    key: "more-after"
+  }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), currentPage < totalPages - 1 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+    key: "next-page",
+    onClick: function onClick() {
+      return setCurrentPage(currentPage + 1);
+    },
+    tabIndex: 0,
+    "aria-label": "Next page"
+  }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "DropdownArrow",
+    direction: "up"
+  }))))))))));
+};
+
+var _excluded$n = ["dataRoh"];
+var Footer = function Footer(_ref) {
+  var data = _ref.data;
+  var policyLinks = data.policyLinks,
+    newsletter = data.newsletter,
+    rawSocialMediaLinks = data.socialMediaLinks,
+    contact = data.contact,
+    _data$artsLogo = data.artsLogo,
+    artsDataRoh = _data$artsLogo.dataRoh,
+    artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$n),
+    additionalInfo = data.additionalInfo;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile;
+  return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksSection, {
+    "data-testid": "policy-links"
+  }, /*#__PURE__*/React__default.createElement(PolicyLinks, {
+    items: policyLinks
+  })), /*#__PURE__*/React__default.createElement(SocialAndNewsletterSection, {
+    "data-testid": "contact-newsletter"
+  }, /*#__PURE__*/React__default.createElement(SocialLinks, {
+    items: rawSocialMediaLinks
+  }), /*#__PURE__*/React__default.createElement(TextLink, {
+    href: contact.href,
+    "aria-label": "Contact us: " + contact.title
+  }, contact.title), /*#__PURE__*/React__default.createElement(NewsletterBodyTextWrapper, {
+    level: 1
+  }, newsletter.text), /*#__PURE__*/React__default.createElement(TextLink, {
+    href: newsletter.link.href,
+    "data-roh": newsletter.link.dataRoh,
+    "aria-label": "Newsletter link: " + newsletter.link.title
+  }, newsletter.link.title)), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement("div", {
+    "data-testid": "arts-logo"
+  }, /*#__PURE__*/React__default.createElement("a", Object.assign({
+    "data-roh": artsDataRoh,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, artsLogo, {
+    "aria-label": "Sponsor Logo link"
+  }), /*#__PURE__*/React__default.createElement(SponsorLogo, null))), /*#__PURE__*/React__default.createElement("div", {
+    "data-testid": "additional-info"
+  }, /*#__PURE__*/React__default.createElement(BodyText, {
+    level: isMobile ? 2 : 3
+  }, additionalInfo)))));
+};
+
+var _templateObject$1f, _templateObject2$V, _templateObject3$K, _templateObject4$B, _templateObject5$v, _templateObject6$m;
+var LIST_ITEM_GAP = 32;
+var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__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(Grid)(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
+var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var TabsList = /*#__PURE__*/styled.ul(_templateObject4$B || (_templateObject4$B = /*#__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) {
+  var tabsOverflow = _ref3.tabsOverflow;
+  return tabsOverflow ? 'start' : 'center';
+}, devices.mobileAndTablet, devices.mobile, function (_ref4) {
+  var tabsOverflow = _ref4.tabsOverflow,
+    hasTwoArrows = _ref4.hasTwoArrows;
+  return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
+});
+var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__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';
+});
+var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
+
+var _excluded$o = ["id", "text"];
+var AnchorTabBar = function AnchorTabBar(_ref) {
+  var tabs = _ref.tabs,
+    onTabClick = _ref.onTabClick,
+    activeTab = _ref.activeTab,
+    absolutePositionParams = _ref.absolutePositionParams,
+    _ref$bottomBorder = _ref.bottomBorder,
+    bottomBorder = _ref$bottomBorder === void 0 ? false : _ref$bottomBorder;
+  var tabListRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var _useState = useState(activeTab || ''),
+    selectedItem = _useState[0],
+    setSelectedItem = _useState[1];
+  var _useState2 = useState(false),
+    tabsOverflow = _useState2[0],
+    setTabsOverflow = _useState2[1];
+  var _useState3 = useState(false),
+    canScrollToLeft = _useState3[0],
+    setCanScrollToLeft = _useState3[1];
+  var _useState4 = useState(tabsOverflow),
+    canScrollToRight = _useState4[0],
+    setCanScrollToRight = _useState4[1];
+  var timer = null;
+  var hasTwoArrows = canScrollToRight && canScrollToLeft;
+  var isSelectedItem = function isSelectedItem(id) {
+    return id === selectedItem;
+  };
+  var onClicktab = function onClicktab(e, id) {
+    if (onTabClick) {
+      onTabClick(e, id);
+    }
+    setSelectedItem(id);
+  };
+  var getScrollWidth = function getScrollWidth() {
+    var width = 0;
+    var selectedItemIndex = tabs.findIndex(function (el) {
+      return el.id === selectedItem;
+    });
+    var tabLinks = document.getElementsByClassName('anchor-tab-bar-tablink');
+    for (var i = 0; i < selectedItemIndex; ++i) {
+      width += tabLinks[i].scrollWidth + LIST_ITEM_GAP;
+    }
+    return width;
+  };
+  // eslint-disable-next-line default-param-last
+  var changeWrapperVisibility = function changeWrapperVisibility(showWrapper, topOffset) {
+    if (showWrapper === void 0) {
+      showWrapper = false;
+    }
+    var wrapperEl = wrapperRef.current;
+    wrapperEl.style.position = 'absolute';
+    wrapperEl.style.visibility = showWrapper && topOffset !== undefined ? 'visible' : 'hidden';
+    if (showWrapper && topOffset !== undefined) wrapperEl.style.top = topOffset + "px";
+  };
+  var handleScrollForAbsolutePosition = function handleScrollForAbsolutePosition() {
+    var _absolutePositionPara = absolutePositionParams.navigationHeight,
+      navigationHeight = _absolutePositionPara === void 0 ? 0 : _absolutePositionPara,
+      _absolutePositionPara2 = absolutePositionParams.topOffset,
+      topOffset = _absolutePositionPara2 === void 0 ? 0 : _absolutePositionPara2;
+    if (wrapperRef.current && window.pageYOffset > topOffset + navigationHeight) {
+      changeWrapperVisibility();
+    } else if (wrapperRef.current && window.pageYOffset < topOffset + navigationHeight) {
+      changeWrapperVisibility(true, topOffset);
+    }
+    if (timer !== null) clearTimeout(timer);
+    timer = setTimeout(function () {
+      if (window.pageYOffset > topOffset + navigationHeight && wrapperRef.current) {
+        changeWrapperVisibility(true, window.pageYOffset - navigationHeight);
+      }
+    }, 300);
+  };
+  // We use this behavior only on iOS devices because there is a known issue that
+  // sticky elements lose their stickiness when a keyboard appears on the screen
+  useEffect(function () {
+    if (absolutePositionParams) {
+      changeWrapperVisibility(true, absolutePositionParams.topOffset);
+      document.addEventListener('scroll', handleScrollForAbsolutePosition);
+      return function () {
+        document.removeEventListener('scroll', handleScrollForAbsolutePosition);
+      };
+    }
+    return undefined;
+  }, []);
+  useEffect(function () {
+    setTimeout(function () {
+      if (tabListRef.current) tabListRef.current.scrollLeft += getScrollWidth();
+    }, 500);
+  }, []);
+  useEffect(function () {
+    var _tabListRef$current, _tabListRef$current2;
+    var tabsIsOverflowed = (((_tabListRef$current = tabListRef.current) == null ? void 0 : _tabListRef$current.scrollWidth) || 0) > (((_tabListRef$current2 = tabListRef.current) == null ? void 0 : _tabListRef$current2.clientWidth) || 0);
+    setTabsOverflow(tabsIsOverflowed);
+    setCanScrollToRight(tabsIsOverflowed);
+  }, [tabListRef]);
+  useEffect(function () {
+    var scrollTriggerCheck = function scrollTriggerCheck() {
+      var elementGap = 100;
+      var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
+        var targetSectionElement = document.getElementById(item.id);
+        if (!targetSectionElement) return false;
+        var topDiff = (targetSectionElement == null ? void 0 : targetSectionElement.getBoundingClientRect().top) - elementGap;
+        return selectedItem !== item.id && topDiff > 0 && topDiff < elementGap;
+      });
+      if (window.scrollY === 0) {
+        setSelectedItem(onTabClick ? selectedItem : '');
+      } else if (reachedItem) {
+        var _ref2 = (tabListRef == null ? void 0 : tabListRef.current) || {},
+          _ref2$scrollLeft = _ref2.scrollLeft,
+          scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
+          _ref2$clientWidth = _ref2.clientWidth,
+          clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
+        var tabLinkElement = document.getElementById("tablink-" + reachedItem.id) || {
+          offsetLeft: 0,
+          offsetWidth: 0
+        };
+        var offsetLeft = tabLinkElement.offsetLeft,
+          offsetWidth = tabLinkElement.offsetWidth;
+        var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
+        if (!isInView && tabListRef != null && tabListRef.current) {
+          tabListRef.current.scrollLeft = offsetLeft;
+        }
+        setSelectedItem(reachedItem.id);
+      }
+    };
+    document.addEventListener('scroll', scrollTriggerCheck);
     return function () {
-      return window.removeEventListener('resize', horizontalScroll);
+      return document.removeEventListener('scroll', scrollTriggerCheck);
     };
-  }, []);
-  var totalRows = Array.isArray(children) ? children.length + 1 : 1;
-  var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
-  var pageNumbers = Array.from({
-    length: totalPages
-  }, function (_, i) {
-    return i;
-  });
-  var reducedPageNumbers = reducePages(pageNumbers, currentPage);
-  var currentRows;
-  if (pagination) {
-    if (Array.isArray(children)) {
-      currentRows = children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage);
-    } else {
-      currentRows = [];
-    }
+  }, [tabs, selectedItem, tabListRef]);
+  var tabsColumnStart;
+  if (tabsOverflow) {
+    tabsColumnStart = canScrollToLeft ? 1 : 2;
   } else {
-    currentRows = children;
+    tabsColumnStart = 3;
   }
-  var visibleRows;
-  if (pagination) {
-    visibleRows = Array.isArray(currentRows) ? currentRows.length + 1 : 0;
+  var tabsColumnSpan;
+  if (tabsOverflow) {
+    tabsColumnSpan = canScrollToLeft ? 15 : 14;
   } else {
-    visibleRows = totalRows;
+    tabsColumnSpan = 12;
   }
-  return /*#__PURE__*/React__default.createElement(Wrapper$7, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
-    onClickPrev: function onClickPrev() {
-      return scrollTable(tableRef, 'left');
-    },
-    onClickNext: function onClickNext() {
-      return scrollTable(tableRef, 'right');
+  var scrollToRight = function scrollToRight() {
+    if (tabListRef.current) {
+      var scroll = tabListRef.current.scrollLeft;
+      var newScroll = Math.min(tabListRef.current.clientWidth, tabListRef.current.scrollWidth - scroll);
+      if (scroll - newScroll < LIST_ITEM_GAP) {
+        tabListRef.current.scrollLeft += newScroll + LIST_ITEM_GAP;
+        return;
+      }
+      tabListRef.current.scrollLeft += newScroll;
     }
-  }))), /*#__PURE__*/React__default.createElement(Container$6, {
-    role: "table",
-    tabIndex: 0,
-    ref: tableRef,
-    "aria-rowcount": totalRows,
-    "aria-colcount": columns
-  }, /*#__PURE__*/React__default.createElement(AriaDescription$1, {
-    id: "table-description"
-  }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, ' ', /*#__PURE__*/React__default.createElement("tr", {
-    role: "columnheader"
-  }, headings == null ? void 0 : headings.map(function (heading, index) {
-    return /*#__PURE__*/React__default.createElement(TableHeader, {
-      key: index,
-      role: "columnheader",
-      scope: "col",
-      columns: columns,
-      lineColor: lineColor
-    }, /*#__PURE__*/React__default.createElement(Content, {
-      content: heading
-    }));
-  }))), /*#__PURE__*/React__default.createElement("tbody", null, ' ', Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
-    return /*#__PURE__*/React__default.createElement(Row, {
-      key: rowIndex,
-      row: row,
-      rowIndex: rowIndex,
-      columns: columns,
-      lineColor: lineColor
-    });
-  }))), pagination && totalPages > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription$1, {
-    id: "pagination-description"
-  }, "Table pagination: current page ", currentPage + 1, " of ", totalPages), /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
-    key: "previous-page",
-    onClick: function onClick() {
-      return setCurrentPage(currentPage - 1);
-    },
-    tabIndex: 0,
-    "aria-label": "Previous page"
-  }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "DropdownArrow",
-    direction: "down"
-  }))))), currentPage > 2 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
-    key: "more-before"
-  }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), reducedPageNumbers.map(function (number) {
+  };
+  var scrollToLeft = function scrollToLeft() {
+    if (tabListRef.current) {
+      var scroll = tabListRef.current.scrollLeft;
+      var newScroll = Math.max(0, scroll - tabListRef.current.clientWidth);
+      if (newScroll < LIST_ITEM_GAP) {
+        tabListRef.current.scrollLeft = newScroll - LIST_ITEM_GAP;
+        return;
+      }
+      tabListRef.current.scrollLeft = newScroll;
+    }
+  };
+  var onTabsScroll = function onTabsScroll() {
+    var _ref3 = (tabListRef == null ? void 0 : tabListRef.current) || {},
+      _ref3$scrollLeft = _ref3.scrollLeft,
+      scrollLeft = _ref3$scrollLeft === void 0 ? 0 : _ref3$scrollLeft,
+      _ref3$clientWidth = _ref3.clientWidth,
+      clientWidth = _ref3$clientWidth === void 0 ? 0 : _ref3$clientWidth,
+      _ref3$scrollWidth = _ref3.scrollWidth,
+      scrollWidth = _ref3$scrollWidth === void 0 ? 0 : _ref3$scrollWidth;
+    setCanScrollToLeft(scrollLeft > LIST_ITEM_GAP);
+    setCanScrollToRight(scrollLeft + clientWidth + LIST_ITEM_GAP < scrollWidth);
+  };
+  return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, {
+    bottomBorder: bottomBorder,
+    ref: wrapperRef,
+    id: "AnchorTabbarWrapper"
+  }, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: tabsColumnStart,
+    columnSpanDesktop: tabsColumnSpan,
+    columnStartDevice: 2,
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(TabsWrapper, {
+    "data-testid": "anchor-tabs"
+  }, /*#__PURE__*/React__default.createElement(TabsList, {
+    hasTwoArrows: hasTwoArrows,
+    ref: tabListRef,
+    tabsOverflow: tabsOverflow,
+    onScroll: onTabsScroll
+  }, tabs.map(function (_ref4) {
+    var id = _ref4.id,
+      text = _ref4.text,
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$o);
     return /*#__PURE__*/React__default.createElement("li", {
-      key: number
-    }, /*#__PURE__*/React__default.createElement(PageNumber$1, {
-      key: number,
-      onClick: function onClick() {
-        return setCurrentPage(number);
+      key: id
+    }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
+      selected: isSelectedItem(id),
+      className: "anchor-tab-bar-tablink",
+      id: "tablink-" + id,
+      onClick: function onClick(e) {
+        return onClicktab(e, id);
       },
-      tabIndex: 0,
-      active: "" + (number === currentPage)
-    }, number + 1));
-  }), currentPage + 4 < totalPages && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
-    key: "more-after"
-  }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), currentPage < totalPages - 1 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
-    key: "next-page",
-    onClick: function onClick() {
-      return setCurrentPage(currentPage + 1);
-    },
-    tabIndex: 0,
-    "aria-label": "Next page"
-  }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "DropdownArrow",
-    direction: "up"
-  }))))))))));
+      tabIndex: 0
+    }, rest), text));
+  })), tabsOverflow ? (/*#__PURE__*/React__default.createElement(ArrowsContainer, {
+    fullWidth: hasTwoArrows
+  }, canScrollToLeft ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
+    onClick: scrollToLeft
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "Arrow",
+    direction: "reverse"
+  }))) : null, canScrollToRight ? (/*#__PURE__*/React__default.createElement(ArrowWrapper, {
+    onClick: scrollToRight
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "Arrow"
+  }))) : null)) : null))));
+};
+
+var _templateObject$1g, _templateObject2$W, _templateObject3$L, _templateObject4$C, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$7, _templateObject10$7;
+var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__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(Grid)(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
+var TitleCTAGridItem = /*#__PURE__*/styled.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.div(_templateObject4$C || (_templateObject4$C = /*#__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.div(_templateObject6$n || (_templateObject6$n = /*#__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.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
+var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.primaryButtonReverseBg;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.primaryButtonReverseBg;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors.primaryButtonReverse;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.colors.primaryButtonReverse;
+});
+var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: var(--grid-outer-margin);\n  height: var(--button-height);\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      margin-right: var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      align-items: center;\n      margin-left: var(--grid-margin);\n      padding: 12px 0;\n    }\n  }\n"])), devices.mobile);
+
+var _excluded$p = ["text"],
+  _excluded2$3 = ["text"];
+var TitleWithCTA = function TitleWithCTA(_ref) {
+  var title = _ref.title,
+    links = _ref.links,
+    _ref$sticky = _ref.sticky,
+    sticky = _ref$sticky === void 0 ? false : _ref$sticky,
+    message = _ref.message;
+  var _ref2 = (links == null ? void 0 : links[0]) || {},
+    primaryButtonText = _ref2.text,
+    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
+  var _ref3 = (links == null ? void 0 : links[1]) || {},
+    secondaryButtonText = _ref3.text,
+    secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
+  return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
+    sticky: sticky
+  }, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
+    title: title
+  }, title ? (/*#__PURE__*/React__default.createElement(AnchorTitle, {
+    "data-testid": "anchor-title"
+  }, /*#__PURE__*/React__default.createElement(Header, {
+    level: 5
+  }, title))) : null, links != null && links[0] ? (/*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
+    "data-testid": "anchor-ctas"
+  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? (/*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText)) : null)) : message && (/*#__PURE__*/React__default.createElement(MessageWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, message))))), links != null && links[0] ? (/*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText))) : message && (/*#__PURE__*/React__default.createElement(MessageWrapperMobile, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, message))));
+};
+
+var _templateObject$1h;
+var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__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 UpsellCards = function UpsellCards(_ref) {
+  var upsellCards = _ref.upsellCards;
+  return /*#__PURE__*/React__default.createElement(Wrapper$7, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
+    return /*#__PURE__*/React__default.createElement(UpsellCard, {
+      key: "upsell-card-" + index,
+      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$1i, _templateObject2$X, _templateObject3$M;
+var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__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$4 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  @media ", " {\n    margin-left: 1.5em;\n    margin-right: 1.5em;\n  }\n"])), devices.mobile);
+var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__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 UpsellSection = function UpsellSection(_ref) {
   var title = _ref.title,
     richText = _ref.richText,
@@ -10224,9 +10281,9 @@ var UpsellSection = function UpsellSection(_ref) {
     columnSpanDevice: 12,
     columnStartSmallDevice: 1,
     columnSpanSmallDevice: 14
-  }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+  }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContainer$4, null, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 4
-  }, title)), /*#__PURE__*/React__default.createElement(TextContainer, null, /*#__PURE__*/React__default.createElement(TextOnly, {
+  }, title)), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextOnly, {
     text: richText != null ? richText : '',
     columnStartDesktop: 1,
     columnSpanDesktop: 14,
@@ -10286,9 +10343,9 @@ var LiveChat = function LiveChat() {
   });
 };
 
-var _templateObject$1j, _templateObject2$Z;
+var _templateObject$1j, _templateObject2$Y;
 var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__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(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
+var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
   var hideBottomBorder = _ref.hideBottomBorder;
   return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
 }, devices.mobileAndTablet, devices.mobile);
@@ -10316,11 +10373,11 @@ var StickyBar = function StickyBar(_ref) {
   }, children)));
 };
 
-var _templateObject$1k, _templateObject2$_, _templateObject3$P, _templateObject4$E;
+var _templateObject$1k, _templateObject2$Z, _templateObject3$N, _templateObject4$D;
 var InnerModal = /*#__PURE__*/styled.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 62px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n  position: relative;\n\n  @media ", ", ", " {\n    height: 100vh;\n    padding: 62px 0 0;\n  }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
-var CloseButton = /*#__PURE__*/styled.button(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
-var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
+var CloseButton = /*#__PURE__*/styled.button(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
+var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
 
 var _excluded$q = ["isOpen", "setIsOpen", "children", "appElementId"];
 var MAX_Z_INDEX = 9999999999;
@@ -10436,7 +10493,7 @@ var ModalWindow = function ModalWindow(_ref) {
 };
 
 var _templateObject$1l;
-var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", "; \n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n    \n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n    --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n\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 GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", "; \n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n    \n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n    --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n    --harmonic-text-link-underline-offset: 6px;\n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n    }\n\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
@@ -11375,6 +11432,12 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templa
 }, function (_ref313) {
   var theme = _ref313.theme;
   return theme.fonts.tablet.sizes.body[1];
+}, function (_ref314) {
+  var theme = _ref314.theme;
+  return theme.footer.tablet.paddingTop;
+}, function (_ref315) {
+  var theme = _ref315.theme;
+  return theme.footer.tablet.paddingBottom;
 }, devices.desktop, devices.largeDesktop);
 
 export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, IInformationBackgroundColour, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };