@royaloperahouse/harmonic 0.2.3-b → 0.2.3-d

package/dist/harmonic.esm.js

@@ -355,6 +355,36 @@ function _taggedTemplateLiteralLoose(e, t) {
   return t || (t = e.slice(0)), e.raw = t, e;
 }
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "/* ~~~~~ General Styling Classes ~~~~~ */\n.styles_color-primary__UYod1 {\n  color: var(--color-primary);\n}\n\n.styles_color-black__a05Fo {\n  color: var(--color-base-black);\n}\n\n.styles_color-white__HiYDT {\n  color: var(--color-base-white);\n}\n\n.styles_color-red__zwTZW {\n  color: var(--color-primary-red);\n}\n\n.styles_color-grey__Gc0wv {\n  color: var(--color-base-dark-grey);\n}\n\n.styles_color-inherit__Y12df {\n  color: inherit;\n}\n\n.styles_em__v4FoO {\n  font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.styles_display__VgnTB {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  line-height: 100%;\n\n  &.styles_large__vqVxY {\n    font-size: 96px;\n    font-weight: 700;\n    letter-spacing: -5px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 68px;\n    font-weight: 500;\n    letter-spacing: -3px;\n  }\n\n  /* Serif and Italic styles */\n  &.styles_serif__b-ZjM,\n  &.styles_em__v4FoO {\n    font-family: var(--font-family-serif);\n    font-weight: 500;\n  }\n\n  /* Serif and Italic adjustments */\n  &.styles_large__vqVxY.styles_serif__b-ZjM,\n  &.styles_large__vqVxY.styles_em__v4FoO {\n    letter-spacing: -3px;\n  }\n\n  &.styles_small__e7YDe.styles_serif__b-ZjM,\n  &.styles_small__e7YDe.styles_em__v4FoO {\n    letter-spacing: -2px;\n  }\n\n  @media (max-width: 699px) {\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  margin: 0;\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: -1px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 26px;\n    line-height: 32px;\n    letter-spacing: -0.5px;\n  }\n\n  /* Serif and Italic styles */\n  &.styles_serif__b-ZjM,\n  &.styles_em__v4FoO {\n    font-family: var(--font-family-serif);\n  }\n\n  /* Serif and Italic letter-spacing overrides */\n  &.styles_large__vqVxY.styles_serif__b-ZjM,\n  &.styles_large__vqVxY.styles_em__v4FoO {\n    letter-spacing: -0.5px;\n  }\n\n  &.styles_medium__WQPZj.styles_serif__b-ZjM,\n  &.styles_medium__WQPZj.styles_em__v4FoO {\n    letter-spacing: -0.5px;\n  }\n\n  &.styles_small__e7YDe.styles_serif__b-ZjM,\n  &.styles_small__e7YDe.styles_em__v4FoO {\n    letter-spacing: -0.5px;\n  }\n\n  @media (max-width: 699px) {\n    &.styles_large__vqVxY {\n      font-size: 28px;\n      line-height: 34px;\n      letter-spacing: -1.5px;\n    }\n\n    &.styles_medium__WQPZj {\n      font-size: 24px;\n      line-height: 28px;\n      letter-spacing: -1px;\n    }\n\n    &.styles_small__e7YDe {\n      font-size: 20px;\n      line-height: 26px;\n      letter-spacing: -0.75px;\n    }\n\n    /* Mobile overrides for serif/italic letter-spacing */\n    &.styles_large__vqVxY.styles_serif__b-ZjM,\n    &.styles_large__vqVxY.styles_em__v4FoO,\n    &.styles_medium__WQPZj.styles_serif__b-ZjM,\n    &.styles_medium__WQPZj.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/* Subtitle */\n.styles_subtitle__os3DH {\n  margin: 0;\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    letter-spacing: -0.5px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  @media (max-width: 699px) {\n    &.styles_large__vqVxY {\n      font-size: 17px;\n      line-height: 24px;\n      letter-spacing: -0.5px;\n    }\n\n    &.styles_small__e7YDe {\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: -0.2px;\n    }\n  }\n}\n\n/* Body Copy */\n.styles_bodycopy__uEx9r {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n\n  &.styles_large__vqVxY {\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n  }\n\n  &.styles_medium__WQPZj {\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: -0.5px;\n  }\n\n  @media (max-width: 699px) {\n    &.styles_large__vqVxY {\n      font-size: 17px;\n      line-height: 24px;\n      letter-spacing: -0.5px;\n    }\n\n    &.styles_medium__WQPZj {\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: -0.2px;\n    }\n\n    &.styles_small__e7YDe {\n      font-size: 11px;\n      line-height: 16px;\n      letter-spacing: -0.2px;\n    }\n  }\n}\n\n/* Overline */\n.styles_overline__5xGDa {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n  text-transform: uppercase;\n\n  &.styles_large__vqVxY {\n    font-size: 14px;\n    line-height: 18px;\n    letter-spacing: 0.3px;\n  }\n\n  &.styles_small__e7YDe {\n    font-size: 12px;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  @media (max-width: 699px) {\n    &.styles_large__vqVxY {\n      line-height: 17px;\n      letter-spacing: 0.3px; /* Added to ensure it stays */\n    }\n\n    &.styles_small__e7YDe {\n      line-height: 14px;\n      letter-spacing: 0.3px;\n    }\n  }\n}\n\n/* Button Text */\n.styles_buttontext__UPumF {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  line-height: 20px;\n  letter-spacing: -0.5px;\n  font-weight: 400;\n\n  @media (max-width: 699px) {\n    font-weight: 500;\n    line-height: 17px;\n  }\n}\n\n/* Caption Text */\n.styles_captiontext__-TA6x {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n\n  @media (max-width: 699px) {\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: -0.2px;\n  }\n}\n\n/* Navigation Text */\n.styles_navigationtext__qnnIo {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-size: 19px;\n  line-height: 19px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n\n  @media (max-width: 699px) {\n    font-size: 17px;\n    line-height: 17px;\n  }\n}\n";
+styleInject(css_248z);
+
 // Utility function for creating className strings
 var createClassNames = function createClassNames(baseClass, options) {
   var size = options.size,
@@ -8331,11 +8361,55 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$2 || (_templa
   return '';
 });
 
+// Function to check if a URL is from the same site
+// NOTE: This function is not SSR compatible
+var isSameSiteUrl = function isSameSiteUrl(url) {
+  var _window;
+  if (url[0] === '/') return true; // URL is relative (e.g. /about)
+  if (!((_window = window) != null && _window.location)) return false; // window.location is not available (e.g. in SSR)
+  var currentPageURL = window.location.href || '';
+  var regexPattern = /^(https?:\/\/)?(www\d?\.)?([\w.-]+)\.\w+.*$/;
+  var match = url.match(regexPattern);
+  if (match != null && match[3] && currentPageURL) {
+    var urlDomain = match[3]; // Extract the domain from the third capture group
+    var currentMatch = currentPageURL.match(regexPattern);
+    if (currentMatch) {
+      var currentDomain = currentMatch[3];
+      return urlDomain === currentDomain;
+    }
+  }
+  return false; // URL didn't match the pattern
+};
+// Hook to check if a URL is from the same site - use for SSR
+var useSameSiteUrl = function useSameSiteUrl(url) {
+  var _useState = useState(false),
+    hasSameSiteUrl = _useState[0],
+    setSameSiteUrl = _useState[1];
+  useEffect(function () {
+    setSameSiteUrl(isSameSiteUrl(url));
+  }, [url]);
+  return hasSameSiteUrl;
+};
+var limitImageUrlDimension = function limitImageUrlDimension(imageUrl, widthLimit) {
+  try {
+    var url = new URL(imageUrl);
+    var widthParam = url.searchParams.get('w') || url.searchParams.get('width');
+    if (widthParam) {
+      return imageUrl.replace(/(w|width)=\d+/, "$1=" + widthLimit);
+    }
+    var separator = url.search.includes('?') ? '&' : '?';
+    return "" + imageUrl + separator + "w=" + widthLimit;
+  } catch (error) {
+    return imageUrl;
+  }
+};
+
 var _excluded$k = ["text"],
   _excluded2$3 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_LARGE_TEXT$1 = 28;
 var LENGTH_SMALL_TEXT$2 = 19;
+var IMAGE_WIDTH_LIMIT = 600;
 var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
 var Card = function Card(_ref) {
   var _labelParams$color;
@@ -8401,6 +8475,7 @@ var Card = function Card(_ref) {
   };
   var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
   var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
+  var limitedImage = image ? limitImageUrlDimension(image, IMAGE_WIDTH_LIMIT) : image;
   return /*#__PURE__*/React__default.createElement(CardContainer, {
     onMouseOver: function onMouseOver() {
       return onlyShowButtonsOnHover ? hoverHandler(true) : undefined;
@@ -8440,7 +8515,7 @@ var Card = function Card(_ref) {
   }), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
-    src: image,
+    src: limitedImage,
     alt: imageAltText || title
   })), withContinueWatching && (/*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
     progress: progress,
@@ -9192,7 +9267,7 @@ var TitleWrapper$3 = /*#__PURE__*/styled.div(_templateObject10$5 || (_templateOb
   var isButtonPresent = _ref6.isButtonPresent;
   return isButtonPresent ? '20px' : '0';
 });
-var ContentWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media ", " {\n    min-height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
+var ContentWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media ", " {\n    height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
 
 var PageHeadingPromoBadge;
 (function (PageHeadingPromoBadge) {
@@ -9414,36 +9489,6 @@ var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObj
   return invert ? theme.colors.white : theme.colors.black;
 });
 
-// Function to check if a URL is from the same site
-// NOTE: This function is not SSR compatible
-var isSameSiteUrl = function isSameSiteUrl(url) {
-  var _window;
-  if (url[0] === '/') return true; // URL is relative (e.g. /about)
-  if (!((_window = window) != null && _window.location)) return false; // window.location is not available (e.g. in SSR)
-  var currentPageURL = window.location.href || '';
-  var regexPattern = /^(https?:\/\/)?(www\d?\.)?([\w.-]+)\.\w+.*$/;
-  var match = url.match(regexPattern);
-  if (match != null && match[3] && currentPageURL) {
-    var urlDomain = match[3]; // Extract the domain from the third capture group
-    var currentMatch = currentPageURL.match(regexPattern);
-    if (currentMatch) {
-      var currentDomain = currentMatch[3];
-      return urlDomain === currentDomain;
-    }
-  }
-  return false; // URL didn't match the pattern
-};
-// Hook to check if a URL is from the same site - use for SSR
-var useSameSiteUrl = function useSameSiteUrl(url) {
-  var _useState = useState(false),
-    hasSameSiteUrl = _useState[0],
-    setSameSiteUrl = _useState[1];
-  useEffect(function () {
-    setSameSiteUrl(isSameSiteUrl(url));
-  }, [url]);
-  return hasSameSiteUrl;
-};
-
 var renderBranding = function renderBranding(brandingStyle, invert, brandingText, brandingLink) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
@@ -10159,13 +10204,13 @@ var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$U || (
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
+var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
-var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
-var BodyCopyHarmonicWithWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  margin-bottom: 32px;\n  whiete-space: break-spaces;\n  overflow-wrap: break-word;\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
+var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 32px;\n\n    @media ", " {\n      & {\n        margin: 0 0 24px;\n      }\n    }\n  }\n"])), devices.mobile);
+var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n"])));
 var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref5) {
   var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
     primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
@@ -10311,17 +10356,18 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$titleSize = _ref.titleSize,
     titleSize = _ref$titleSize === void 0 ? 'large' : _ref$titleSize,
-    titleHierarchy = _ref.titleHierarchy,
     subtitle = _ref.subtitle,
     text = _ref.text,
     links = _ref.links,
     children = _ref.children,
     videoSettings = _ref.videoSettings,
+    titleSemanticLevel = _ref.titleSemanticLevel,
     className = _ref.className;
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
   };
   var imageToLeft = imagePosition === 'left';
+  var titleLevel = titleSize === 'large' ? 2 : 3;
   var primaryButton = links == null ? void 0 : links[0];
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
@@ -10345,19 +10391,20 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     imageToLeft: imageToLeft,
     className: className,
     "data-testid": "promo-with-title"
-  }, /*#__PURE__*/React__default.createElement(PromoChild, {
+  }, /*#__PURE__*/React__default.createElement(PromoChild
+  // eslint-disable-next-line react/no-children-prop
+  , {
+    // eslint-disable-next-line react/no-children-prop
+    children: children,
     videoSettings: _extends({}, defaultVideoSettings, videoSettings),
     imageToLeft: imageToLeft
-  }, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
+  }), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft
-  }, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
-    size: titleSize,
-    hierarchy: titleHierarchy
-  }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
-    size: "medium"
-  }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
-    size: "medium",
+  }, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
+    level: titleLevel,
+    semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
+  }, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
     dangerouslySetInnerHTML: {
       __html: text
     }
@@ -12203,6 +12250,7 @@ var isVideoSlide = function isVideoSlide(slideMedia) {
   return slideMedia.video !== undefined;
 };
 
+var IMAGE_WIDTH_LIMIT$1 = 800;
 var VideoSlide = function VideoSlide(_ref) {
   var index = _ref.index,
     settings = _ref.settings,
@@ -12233,12 +12281,18 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
   var hasOnlyImageSlides = slidesMedia.every(function (slide) {
     return !isVideoSlide(slide);
   });
+  var limitedMediaContent = slidesMedia.map(function (slide) {
+    if (isVideoSlide(slide)) return slide;
+    return _extends({}, slide, {
+      src: slide.src ? limitImageUrlDimension(slide.src, IMAGE_WIDTH_LIMIT$1) : undefined
+    });
+  });
   return /*#__PURE__*/React__default.createElement(Swipe, {
     ref: carouselRef,
     infinite: hasMultipleSlides && hasOnlyImageSlides,
     onIndexChange: setCurrentSlide,
     "aria-roledescription": "carousel"
-  }, slidesMedia.map(function (mediaContent, index) {
+  }, limitedMediaContent.map(function (mediaContent, index) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "swiper-slide",
       key: mediaContent.key,
@@ -12335,37 +12389,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   })));
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'VictorSerif';\n  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')\n    format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'VictorSerif';\n  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')\n    format('woff2');\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n";
-styleInject(css_248z);
-
-var css_248z$1 = "/* ~~~~~ General Styling Classes ~~~~~ */\n.typography_color-primary__LOfDi {\n  color: var(--color-primary);\n}\n\n.typography_color-black__6MHRL {\n  color: var(--color-base-black);\n}\n\n.typography_color-white__PfW5s {\n  color: var(--color-base-white);\n}\n\n.typography_color-red__iPlbG {\n  color: var(--color-primary-red);\n}\n\n.typography_color-grey__GA1c2 {\n  color: var(--color-base-dark-grey);\n}\n\n.typography_color-inherit__RDd0Y {\n  color: inherit;\n}\n\n.typography_em__E6tX- {\n  font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.typography_display__-F3p4 {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  line-height: 100%;\n\n  &.typography_large__uq0zC {\n    font-size: 96px;\n    font-weight: 700;\n    letter-spacing: -5px;\n  }\n\n  &.typography_small__wfQ0K {\n    font-size: 68px;\n    font-weight: 500;\n    letter-spacing: -3px;\n  }\n\n  /* Serif and Italic styles */\n  &.typography_serif__VSO38,\n  &.typography_em__E6tX- {\n    font-family: var(--font-family-serif);\n    font-weight: 500;\n  }\n\n  /* Serif and Italic adjustments */\n  &.typography_large__uq0zC.typography_serif__VSO38,\n  &.typography_large__uq0zC.typography_em__E6tX- {\n    letter-spacing: -3px;\n  }\n\n  &.typography_small__wfQ0K.typography_serif__VSO38,\n  &.typography_small__wfQ0K.typography_em__E6tX- {\n    letter-spacing: -2px;\n  }\n\n  @media (max-width: 699px) {\n    &.typography_large__uq0zC {\n      font-size: 38px;\n      letter-spacing: -1.5px;\n    }\n\n    &.typography_small__wfQ0K {\n      font-size: 32px;\n      letter-spacing: -1.5px;\n    }\n\n    &.typography_large__uq0zC.typography_serif__VSO38,\n    &.typography_large__uq0zC.typography_em__E6tX-,\n    &.typography_small__wfQ0K.typography_serif__VSO38,\n    &.typography_small__wfQ0K.typography_em__E6tX- {\n      letter-spacing: -0.5px;\n    }\n  }\n}\n\n/* Headers */\n.typography_header__BexiD {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n\n  &.typography_large__uq0zC {\n    font-size: 44px;\n    line-height: 48px;\n    letter-spacing: -1.5px;\n  }\n\n  &.typography_medium__K0uZD {\n    font-size: 34px;\n    line-height: 40px;\n    letter-spacing: -1px;\n  }\n\n  &.typography_small__wfQ0K {\n    font-size: 26px;\n    line-height: 32px;\n    letter-spacing: -0.5px;\n  }\n\n  /* Serif and Italic styles */\n  &.typography_serif__VSO38,\n  &.typography_em__E6tX- {\n    font-family: var(--font-family-serif);\n  }\n\n  /* Serif and Italic letter-spacing overrides */\n  &.typography_large__uq0zC.typography_serif__VSO38,\n  &.typography_large__uq0zC.typography_em__E6tX- {\n    letter-spacing: -0.5px;\n  }\n\n  &.typography_medium__K0uZD.typography_serif__VSO38,\n  &.typography_medium__K0uZD.typography_em__E6tX- {\n    letter-spacing: -0.5px;\n  }\n\n  &.typography_small__wfQ0K.typography_serif__VSO38,\n  &.typography_small__wfQ0K.typography_em__E6tX- {\n    letter-spacing: -0.5px;\n  }\n\n  @media (max-width: 699px) {\n    &.typography_large__uq0zC {\n      font-size: 28px;\n      line-height: 34px;\n      letter-spacing: -1.5px;\n    }\n\n    &.typography_medium__K0uZD {\n      font-size: 24px;\n      line-height: 28px;\n      letter-spacing: -1px;\n    }\n\n    &.typography_small__wfQ0K {\n      font-size: 20px;\n      line-height: 26px;\n      letter-spacing: -0.75px;\n    }\n\n    /* Mobile overrides for serif/italic letter-spacing */\n    &.typography_large__uq0zC.typography_serif__VSO38,\n    &.typography_large__uq0zC.typography_em__E6tX-,\n    &.typography_medium__K0uZD.typography_serif__VSO38,\n    &.typography_medium__K0uZD.typography_em__E6tX-,\n    &.typography_small__wfQ0K.typography_serif__VSO38,\n    &.typography_small__wfQ0K.typography_em__E6tX- {\n      letter-spacing: -0.5px;\n    }\n  }\n}\n\n/* Subtitle */\n.typography_subtitle__aoFTV {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n\n  &.typography_large__uq0zC {\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n  }\n\n  &.typography_small__wfQ0K {\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  @media (max-width: 699px) {\n    &.typography_large__uq0zC {\n      font-size: 17px;\n      line-height: 24px;\n      letter-spacing: -0.5px;\n    }\n\n    &.typography_small__wfQ0K {\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: -0.2px;\n    }\n  }\n}\n\n/* Body Copy */\n.typography_bodycopy__vYtQ8 {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n\n  &.typography_large__uq0zC {\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n  }\n\n  &.typography_medium__K0uZD {\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  &.typography_small__wfQ0K {\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: -0.5px;\n  }\n\n  @media (max-width: 699px) {\n    &.typography_large__uq0zC {\n      font-size: 17px;\n      line-height: 24px;\n      letter-spacing: -0.5px;\n    }\n\n    &.typography_medium__K0uZD {\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: -0.2px;\n    }\n\n    &.typography_small__wfQ0K {\n      font-size: 11px;\n      line-height: 16px;\n      letter-spacing: -0.2px;\n    }\n  }\n}\n\n/* Overline */\n.typography_overline__EnUK3 {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 500;\n  text-transform: uppercase;\n\n  &.typography_large__uq0zC {\n    font-size: 14px;\n    line-height: 18px;\n    letter-spacing: 0.3px;\n  }\n\n  &.typography_small__wfQ0K {\n    font-size: 12px;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  @media (max-width: 699px) {\n    &.typography_large__uq0zC {\n      line-height: 17px;\n      letter-spacing: 0.3px; /* Added to ensure it stays */\n    }\n\n    &.typography_small__wfQ0K {\n      line-height: 14px;\n      letter-spacing: 0.3px;\n    }\n  }\n}\n\n/* Button Text */\n.typography_buttontext__vcxNi {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  line-height: 20px;\n  letter-spacing: -0.5px;\n  font-weight: 400;\n\n  @media (max-width: 699px) {\n    font-weight: 500;\n    line-height: 17px;\n  }\n}\n\n/* Caption Text */\n.typography_captiontext__91UFb {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: 400;\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n\n  @media (max-width: 699px) {\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: -0.2px;\n  }\n}\n\n/* Navigation Text */\n.typography_navigationtext__YfGf7 {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-size: 19px;\n  line-height: 19px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n\n  @media (max-width: 699px) {\n    font-size: 17px;\n    line-height: 17px;\n  }\n}\n";
+var css_248z$1 = "@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'GreyLLTT';\n  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'VictorSerif';\n  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')\n    format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'VictorSerif';\n  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')\n    format('woff2');\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n";
 styleInject(css_248z$1);
 
 var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n  /* RBO Red */\n  /* Primary Palette */\n  --color-primary: #1a1a1a;\n  --color-primary-background: #eb0a0a;\n  --color-primary-red: #eb0a0a;\n  --color-primary-black: #1a1a1a;\n\n  /* Base Colours */\n  --color-base-white: #ffffff;\n  --color-base-black: #000000;\n  --color-base-dark-grey: #4c4f53;\n  --color-base-mid-grey: #72767c;\n  --color-base-light-grey: #e9e9e9;\n  --color-base-transparent: transparent;\n\n  /* States */\n  --color-state-error: #cc071e;\n  --color-state-medium: #ffce45;\n  --color-state-good: #2a874a;\n  --color-state-focused: #1e1da0;\n  --color-state-disabled: #b3b3b3;\n\n  /* RBO Red (Core) */\n  --color-rbo-red-hovered: #c40808;\n  --color-rbo-red-pressed: #9d0707;\n\n  /* RBO Black */\n  --color-rbo-black-hovered: #575757;\n  --color-rbo-black-pressed: #353535;\n\n  /* Black */\n  --color-black-hovered: #575757;\n  --color-black-pressed: #353535;\n\n  /* White */\n  --color-white-hovered: #fafafa;\n  --color-white-pressed: #f2f2f2;\n\n  /* Secondary Palette */\n  --color-secondary-yellow: #ffce45;\n  --color-secondary-pink: #ff36d0;\n  --color-secondary-orange: #ff6700;\n  --color-secondary-blue: #5f9cff;\n\n  /* Core theme colors */\n  --base-color-primary: #c8102e;\n  --base-color-core: #c8102e;\n  --base-color-stream: #1866dc;\n  --base-color-cinema: #1a1a1a;\n  --base-color-white: #ffffff;\n  --base-color-black: #000000;\n  --base-color-dark-grey: #4c4f53;\n  --base-color-mid-grey: #72767c;\n  --base-color-light-grey: #e9e9e9;\n  --base-color-transparent: transparent;\n  --base-color-errorstate: #eb0a0a;\n  --base-color-mediumstate: #ffce45;\n  --base-color-goodstate: #2a874a;\n  --base-color-progress: #1866dc;\n  --base-color-navigation: #c8102e;\n  --base-color-lapislazuli: #0060a0;\n  --base-color-lemonchiffon: #fffbbe;\n\n  --button-height: 48px;\n  --button-line-height: 20px;\n  --button-padding-x: 20px;\n  --button-padding-y: 14px;\n  --button-padding-y-icon: 12px;\n  --button-icon-margin: 12px;\n  --button-icon-width: 20px;\n  --button-icon-height: 20px;\n  --button-font-size: 14px;\n  --button-font-weight: 400;\n  --button-color: var(--color-base-white);\n  --button-bg-color: var(--color-primary-red);\n  --button-hover-color: var(--color-rbo-red-hovered);\n  --button-pressed-color: var(--color-rbo-red-pressed);\n  --button-secondary-color: var(--color-primary-red);\n  --button-secondary-hover-color: var(--color-rbo-red-hovered);\n  --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n  --button-tertiary-color: var(--color-primary-black);\n  --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n  --button-auxiliary-color: var(--color-primary-black);\n  --button-auxiliary-bg-color: var(--color-base-transparent);\n\n/* -----  Variables already used in Harmonic START  ----- */\n  --grid-column-gap: 36px;\n  --grid-margin: 10%;\n\n  --rotator-button-width: 60px;\n  --rotator-button-icon-width: 36px;\n  --rotator-button-color: var(--color-primary-black);\n  --rotator-button-bg-color: var(--color-base-light-grey);\n  --rotator-button-hover-color: var(--color-base-white);\n  --rotator-button-hover-bg-color: var(--color-primary-red);\n\n  --carousel-image-caption-height: 17px;\n  \n  @media (max-width: 699px) {\n    --grid-column-gap: 12px;\n    --grid-margin: 20px;\n    --rotator-button-width: 40px;\n    --rotator-button-icon-width: 24px;\n    --carousel-image-caption-height: 14px;\n  }\n\n  @media (min-width: 700px) and (max-width: 1139px) {\n    --grid-column-gap: 20px;\n    --grid-margin: 32px;\n    --rotator-button-width: 44px;\n    --rotator-button-icon-width: 24px;\n    --carousel-image-caption-height: 14px;\n  }\n\n/* -----  Variables already used in Harmonic END  ----- */\n\n  --font-size-header-1: 96px;\n  --font-weight-header-1: 500;\n  --letter-spacing-header-1: 2px;\n  --line-height-header-1: 110px;\n  --margin-header-1: 0.67em 0;\n\n  --font-size-header-2: 68px;\n  --font-weight-header-2: 500;\n  --letter-spacing-header-2: 1px;\n  --line-height-header-2: 72px;\n  --margin-header-2: 0.83em 0;\n\n  --font-size-header-3: 44px;\n  --font-weight-header-3: 500;\n  --letter-spacing-header-3: 1px;\n  --line-height-header-3: 48px;\n  --margin-header-3: 1em 0;\n\n  --font-size-header-4: 34px;\n  --font-weight-header-4: 500;\n  --letter-spacing-header-4: 1px;\n  --line-height-header-4: 40px;\n  --margin-header-4: 1.33em 0;\n\n  --font-size-header-5: 24px;\n  --font-weight-header-5: 500;\n  --letter-spacing-header-5: 1px;\n  --line-height-header-5: 30px;\n  --margin-header-5: 1.67em 0;\n\n  --font-size-header-6: 20px;\n  --font-weight-header-6: 500;\n  --letter-spacing-header-6: 1px;\n  --line-height-header-6: 28px;\n  --margin-header-6: 2.33em 0;\n\n  --font-size-altHeader-3: 44px;\n  --font-weight-altHeader-3: normal;\n  --letter-spacing-altHeader-3: normal;\n  --line-height-altHeader-3: 48px;\n\n  --font-size-altHeader-4: 34px;\n  --font-weight-altHeader-4: normal;\n  --letter-spacing-altHeader-4: normal;\n  --line-height-altHeader-4: 44px;\n\n  --font-size-altHeader-5: 24px;\n  --font-weight-altHeader-5: normal;\n  --letter-spacing-altHeader-5: normal;\n  --line-height-altHeader-5: 30px;\n\n  --font-size-altHeader-6: 20px;\n  --font-weight-altHeader-6: normal;\n  --letter-spacing-altHeader-6: normal;\n  --line-height-altHeader-6: 28px;\n\n  --font-size-overline-1: 14px;\n  --font-weight-overline-1: 500;\n  --letter-spacing-overline-1: 1px;\n  --line-height-overline-1: 16px;\n\n  --font-size-overline-2: 12px;\n  --font-weight-overline-2: 500;\n  --letter-spacing-overline-2: 1px;\n  --line-height-overline-2: 14px;\n\n  --font-size-overline-3: 10px;\n  --font-weight-overline-3: 500;\n  --letter-spacing-overline-3: 1px;\n  --line-height-overline-3: 12px;\n\n  --font-size-overline-4: 8px;\n  --font-weight-overline-4: 500;\n  --letter-spacing-overline-4: 1px;\n  --line-height-overline-4: 10px;\n\n  --font-size-body-1: 19px;\n  --font-weight-body-1: 400;\n  --letter-spacing-body-1: normal;\n  --line-height-body-1: 26px;\n\n  --font-size-body-2: 16px;\n  --font-weight-body-2: 400;\n  --letter-spacing-body-2: normal;\n  --line-height-body-2: 22px;\n\n  --font-size-body-3: 14px;\n  --font-weight-body-3: 400;\n  --letter-spacing-body-3: normal;\n  --line-height-body-3: 20px;\n\n  --font-size-subtitle-1: 18px;\n  --font-weight-subtitle-1: 500;\n  --letter-spacing-subtitle-1: 1px;\n  --line-height-subtitle-1: 22px;\n\n  --font-size-subtitle-2: 14px;\n  --font-weight-subtitle-2: 500;\n  --letter-spacing-subtitle-2: 1px;\n  --line-height-subtitle-2: 22px;\n\n  --font-size-title-description: 20px;\n  --line-height-title-description: 28px;\n\n  --line-height-listing: 36px;\n  --font-size-individual-listing-name: 19px;\n  --line-height-individual-listing-name: 24px;\n  --line-height-people-listing-gap: 24px;\n\n  --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-altHeader: 'adobe-garamond-pro';\n  --font-family-body: 'adobe-garamond-pro';\n  --font-family-body-italics: 'adobe-garamond-pro';\n  --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-family-people-listing-name: 'adobe-garamond-pro';\n\n  --font-feature-settings-header: 'tnum' on, 'lnum' on;\n  --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n  --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n  --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n  --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n  --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n  --text-transform-header: uppercase;\n  --text-transform-altHeader: none;\n  --text-transform-body: none;\n  --text-transform-overline: uppercase;\n  --text-transform-subtitle: uppercase;\n\n  --word-break-header: break-word;\n  --word-break-altHeader: break-word;\n  --word-break-body: break-word;\n  --word-break-overline: break-word;\n  --word-break-subtitle: break-word;\n\n  --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n  --font-size-navigation: 13px;\n  --font-weight-navigation: 500;\n  --line-height-navigation: 16px;\n  --text-transform-navigation: uppercase;\n  --letter-spacing-navigation: 1px;\n\n  --navigation-small-gap: 16px;\n  --navigation-middle-gap: 20px;\n  --navigation-large-gap: 24px;\n  --navigation-xlarge-gap: 36px;\n  --navigation-large-margin: 60px;\n\n  --font-size-search: 24px;\n  --font-family-search: 'adobe-garamond-pro';\n\n  --grid-outer-margin: 50px;\n  --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n  --footer-height: 380px;\n  --footer-padding-top: 44px;\n  --footer-padding-bottom: 44px;\n  --footer-items-gap: 32px;\n  --footer-media-gap: 32px;\n  --footer-media-icon-width: 24px;\n  --footer-media-icon-height: 24px;\n  --footer-vertical-spacing-lg: 58px;\n  --footer-vertical-spacing-sm: 16px;\n\n  --text-link-underline-offset: 8px;\n  --cards-spacing-stack: 40px;\n\n  --editorial-subtitle-margin-bottom: 16px;\n  --editorial-margin-between: 24px;\n  --editorial-spacing-hover: 4px;\n  --anchor-tabs-height: 70px;\n\n  --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n  --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n  --harmonic-text-link-underline-offset: 6px;\n  --harmonic-font-size-navigation: 19px;\n\n  --announcement-banner-color: var(--color-base-white);\n  --announcement-banner-bg-color: var(--color-primary-red);\n  --announcement-banner-hover-color: var(--color-white-hovered);\n  --announcement-banner-pressed-color: var(--color-white-pressed);\n\n  --information-panel-color: var(--color-base-white);\n  --information-panel-bg-color: var(--color-primary-red);\n  --information-panel-button-color: var(--color-primary-black);\n  --information-panel-button-bg-color: var(--color-base-white);\n  --information-panel-button-hover-color: var(--color-white-hovered);\n  --information-panel-button-pressed-color: var(--color-white-pressed);\n\n  --heading-promo-bg-color: var(--color-primary-red);\n\n  @media (max-width: 699px) {\n    --font-size-header-1: 38px;\n    --font-weight-header-1: 500;\n    --letter-spacing-header-1: 1px;\n    --line-height-header-1: 42px;\n\n    --font-size-header-2: 30px;\n    --font-weight-header-2: 500;\n    --letter-spacing-header-2: 1px;\n    --line-height-header-2: 34px;\n\n    --font-size-header-3: 26px;\n    --font-weight-header-3: 500;\n    --letter-spacing-header-3: 1px;\n    --line-height-header-3: 30px;\n\n    --font-size-header-4: 24px;\n    --font-weight-header-4: 500;\n    --letter-spacing-header-4: 1px;\n    --line-height-header-4: 28px;\n\n    --font-size-header-5: 20px;\n    --font-weight-header-5: 500;\n    --letter-spacing-header-5: 1px;\n    --line-height-header-5: 28px;\n\n    --font-size-header-6: 17px;\n    --font-weight-header-6: 500;\n    --letter-spacing-header-6: 1px;\n    --line-height-header-6: 24px;\n\n    --font-size-altHeader-3: 26px;\n    --font-weight-altHeader-3: normal;\n    --letter-spacing-altHeader-3: normal;\n    --line-height-altHeader-3: 30px;\n\n    --font-size-altHeader-4: 24px;\n    --font-weight-altHeader-4: normal;\n    --letter-spacing-altHeader-4: normal;\n    --line-height-altHeader-4: 28px;\n\n    --font-size-altHeader-5: 20px;\n    --font-weight-altHeader-5: normal;\n    --letter-spacing-altHeader-5: normal;\n    --line-height-altHeader-5: 28px;\n\n    --font-size-altHeader-6: 17px;\n    --font-weight-altHeader-6: normal;\n    --letter-spacing-altHeader-6: normal;\n    --line-height-altHeader-6: 24px;\n\n    --font-size-overline-1: 14px;\n    --font-weight-overline-1: 500;\n    --letter-spacing-overline-1: 1px;\n    --line-height-overline-1: 16px;\n\n    --font-size-overline-2: 12px;\n    --font-weight-overline-2: 500;\n    --letter-spacing-overline-2: 1px;\n    --line-height-overline-2: 14px;\n\n    --font-size-body-1: 17px;\n    --font-weight-body-1: 400;\n    --letter-spacing-body-1: normal;\n    --line-height-body-1: 24px;\n\n    --font-size-body-2: 12px;\n    --font-weight-body-2: 400;\n    --letter-spacing-body-2: normal;\n    --line-height-body-2: 18px;\n\n    --font-size-body-3: 11px;\n    --font-weight-body-3: 400;\n    --letter-spacing-body-3: normal;\n    --line-height-body-3: 16px;\n\n    --font-size-subtitle-1: 16px;\n    --font-weight-subtitle-1: 500;\n    --letter-spacing-subtitle-1: 1px;\n    --line-height-subtitle-1: 24px;\n\n    --font-size-subtitle-2: 14px;\n    --font-weight-subtitle-2: 500;\n    --letter-spacing-subtitle-2: 1px;\n    --line-height-subtitle-2: 18px;\n\n    --font-size-title-description: 17px;\n    --line-height-title-description: 24px;\n    --line-height-people-listing-gap: 16px;\n\n    --font-size-search: 20px;\n    --font-family-search: 'adobe-garamond-pro';\n\n    --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-altHeader: 'adobe-garamond-pro';\n    --font-family-body: 'adobe-garamond-pro';\n    --font-family-body-italics: 'adobe-garamond-pro';\n    --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-overline: 'Gotham SSm Medium', sans-serif;\n    --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n    --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n    --font-family-people-listing-name: 'adobe-garamond-pro';\n\n    --font-feature-settings-header: 'tnum' on, 'lnum' on;\n    --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n    --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n    --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n    --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n    --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n    --text-transform-header: uppercase;\n    --text-transform-altHeader: none;\n    --text-transform-body: none;\n    --text-transform-overline: uppercase;\n    --text-transform-subtitle: uppercase;\n\n    --word-break-header: break-word;\n    --word-break-altHeader: break-word;\n    --word-break-body: break-word;\n    --word-break-overline: break-word;\n    --word-break-subtitle: break-word;\n\n    --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n    --footer-height: auto;\n    --footer-padding-top: 20px;\n    --footer-padding-bottom: 20px;\n    --footer-items-gap: 12px;\n    --footer-media-icon-width: 28px;\n    --footer-media-icon-height: 28px;\n    --footer-vertical-spacing-lg: 24px;\n    --footer-vertical-spacing-sm: 24px;\n\n    --anchor-tabs-height: 60px;\n  }\n\n  @media (min-width: 700px) and (max-width: 1139px) {\n    --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n    --font-size-header-6: 17px;\n    --font-size-altHeader-4: 24px;\n    --font-size-body-1: 17px;\n\n    --footer-media-gap: 24px;\n    --footer-padding-top: 40px;\n    --footer-padding-bottom: 40px;\n  }\n}\n";