@royaloperahouse/chord 0.3.8 → 0.3.9

package/dist/chord.cjs.development.js

@@ -8,6 +8,8 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
+var swiperReact_js = require('swiper/react/swiper-react.js');
+require('swiper/swiper-bundle.css');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -2749,16 +2751,22 @@ var Subtitle = function Subtitle(_ref6) {
   }, children);
 };
 
+var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
+var zIndexes = {};
+zLevels.forEach(function (name, index) {
+  zIndexes[name] = index;
+});
+
 var _templateObject$j, _templateObject2$5, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 100vw;\n  position: absolute;\n  z-index: 8;\n  opacity: 0.4;\n"])));
-var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--base-color-white);\n  height: 140px;\n  z-index: 9;\n\n  @media ", " {\n    height: 80px;\n  }\n"])), devices.mobile);
-var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  height: 100px;\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%\n  position: absolute;\n  top: 140px;\n  z-index: 9;\n\n  @media ", " {\n    height: 80px;\n    top: 80px;\n  }\n"])), devices.mobile);
-var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border-top: 1px solid var(--base-color-light-grey);\n  height: 100px;\n  width: 100%\n  position: absolute;\n  top: 140px;\n  z-index: 9;\n \n  @media ", " {\n    height: 80px;\n    top: 80px;\n  }\n"])), devices.mobile);
+var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 100vw;\n  position: absolute;\n  z-index: ", ";\n  opacity: 0.4;\n"])), zIndexes.searchOverlay);
+var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--base-color-white);\n  height: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 80px;\n  }\n"])), zIndexes.navigation, devices.mobile);
+var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  height: 100px;\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 80px;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
+var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border-top: 1px solid var(--base-color-light-grey);\n  height: 100px;\n  width: 100%\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n \n  @media ", " {\n    height: 80px;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
 var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    background-color: var(--base-color-white);\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet);
 var LogoContainer = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 140px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  &&& .Logosvg {\n    height: 96px;\n    width: 66px;\n  }\n\n  @media ", " {\n    height: 80px;\n\n    &&& .Logosvg {\n      width: 100%;\n      height: 64px;\n    }\n  }\n"])), devices.mobile);
-var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 140px;\n\n  @media ", " {\n    flex-direction: row;\n    height: 80px;\n  }\n"])), devices.mobileAndTablet);
+var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 140px;\n\n  @media ", " {\n    flex-direction: row;\n    height: 80px;\n    justify-content: flex-end;\n  }\n"])), devices.mobileAndTablet);
 var NavContainer = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 40px;\n  margin-top: auto;\n\n  @media ", " {\n    background-color: var(--base-color-white);\n    height: auto;\n    margin-top: 0px;\n  }\n"])), devices.mobileAndTablet);
-var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 26px;\n  margin-left: auto;\n  margin-top: 20px;\n\n  @media ", " {\n    margin-top: 1px;\n  }\n"])), devices.mobileAndTablet);
+var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject9 || (_templateObject9 = /*#__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$k, _templateObject2$6, _templateObject3$2;
 var icon = /*#__PURE__*/styled__default.svg.attrs({
@@ -2871,7 +2879,10 @@ var OptionItem = /*#__PURE__*/styled__default.a(_templateObject2$9 || (_template
   var colorPrimary = _ref.colorPrimary;
   return colorPrimary;
 });
-var OptionsContainer = /*#__PURE__*/styled__default.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border: 1px solid var(--base-color-light-grey);\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--navigation-small-gap);\n  padding: var(--navigation-middle-gap);\n  position: absolute;\n  top: 25px;\n  width: max-content;\n  z-index: 10;\n\n  ", "\n\n  @media ", " {\n    padding-left: 0px;\n    padding-bottom: 0px;\n    row-gap: var(--navigation-large-gap);\n    border: 0;\n    background-color: none;\n\n    ", "\n  }\n"])), function (props) {
+var OptionsContainer = /*#__PURE__*/styled__default.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border: 1px solid var(--base-color-light-grey);\n  border-top-color: var(--base-color-", ");\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--navigation-small-gap);\n  padding: var(--navigation-middle-gap);\n  position: absolute;\n  top: 24px;\n  min-width: calc(100% - calc(2 * var(--navigation-middle-gap)));\n  max-width: max-content;\n  white-space: nowrap;\n  z-index: ", ";\n\n  ", "\n\n  @media ", " {\n    padding-left: 0px;\n    padding-bottom: 0px;\n    row-gap: var(--navigation-large-gap);\n    border: 0;\n    background-color: none;\n\n    ", "\n  }\n"])), function (_ref2) {
+  var colorPrimary = _ref2.colorPrimary;
+  return colorPrimary;
+}, zIndexes.menu, function (props) {
   if (props.withIcon === 'none') {
     return "\n        top: 21px;\n    ";
   }
@@ -2997,7 +3008,8 @@ var Dropdown = function Dropdown(_ref) {
       colorPrimary: colorPrimary
     }), withOptions() && open && /*#__PURE__*/React__default.createElement(OptionsContainer, {
       withOptionsInMobile: withOptionsInMobile,
-      withIcon: withIcon
+      withIcon: withIcon,
+      colorPrimary: colorPrimary
     }, options.map(function (optionItem, index) {
       return /*#__PURE__*/React__default.createElement(OptionItem, {
         key: "key-" + index + "-" + optionItem.option,
@@ -3107,6 +3119,91 @@ var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$5 || (_t
 }, devices.mobileAndTablet);
 var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    a {\n      margin-left: 20px;\n    }\n  }\n"])), devices.mobileAndTablet);
 
+var _templateObject$q, _templateObject2$b, _templateObject3$6;
+var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: fit-content;\n"])));
+var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.a(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-black);\n  text-decoration: none;\n  text-transform: uppercase;\n  cursor: pointer;\n\n  ", "\n"])), function (_ref) {
+  var active = _ref.active,
+      activeColor = _ref.activeColor;
+
+  if (active) {
+    return "\n      & {\n        border-bottom: 1px solid " + activeColor + ";\n        color: var(--base-color-" + activeColor + ");\n      }\n      && svg path {\n        fill: var(--base-color-" + activeColor + ");\n      } \n      ";
+  } else {
+    return '';
+  }
+});
+var IconWrapper$1 = /*#__PURE__*/styled__default.span(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n"])));
+
+var ControlledDropdown = function ControlledDropdown(_ref) {
+  var text = _ref.text,
+      options = _ref.options,
+      _ref$activeColor = _ref.activeColor,
+      activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,
+      active = _ref.active,
+      _onClick = _ref.onClick,
+      onOptionClick = _ref.onOptionClick,
+      _onMouseEnter = _ref.onMouseEnter,
+      _onMouseLeave = _ref.onMouseLeave,
+      onReset = _ref.onReset;
+  var ref = React.useRef();
+  var resetHandler = React.useCallback(function () {
+    return onReset == null ? void 0 : onReset();
+  }, []);
+  React.useEffect(function () {
+    if (window.innerWidth > breakpoints.sm) {
+      var mouseClickHandler = function mouseClickHandler(e) {
+        var _ref$current;
+
+        if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
+          return;
+        } else if (active) {
+          resetHandler();
+        }
+      };
+
+      document.addEventListener('click', mouseClickHandler);
+      return function () {
+        document.removeEventListener('click', mouseClickHandler);
+      };
+    }
+
+    return;
+  }, [ref, resetHandler, active]);
+  var wrapperEvents = {
+    onMouseEnter: function onMouseEnter() {
+      return _onMouseEnter == null ? void 0 : _onMouseEnter();
+    },
+    onMouseLeave: function onMouseLeave() {
+      return _onMouseLeave == null ? void 0 : _onMouseLeave();
+    }
+  };
+  var headerEvents = {
+    onClick: function onClick() {
+      return _onClick == null ? void 0 : _onClick();
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
+    ref: ref
+  }, wrapperEvents), /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
+    active: active,
+    activeColor: activeColor
+  }, headerEvents), /*#__PURE__*/React__default.createElement("span", null, text), options != null && options.length ? /*#__PURE__*/React__default.createElement(IconWrapper$1, {
+    "data-testid": "dropdown-icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "DropdownArrow"
+  })) : null), active && options != null && options.length ? /*#__PURE__*/React__default.createElement(OptionsContainer, {
+    colorPrimary: activeColor,
+    withOptionsInMobile: true
+  }, options.map(function (optionItem, index) {
+    return /*#__PURE__*/React__default.createElement(OptionItem, {
+      key: "key-" + index + "-" + optionItem.option,
+      onClick: function onClick() {
+        return onOptionClick == null ? void 0 : onOptionClick(optionItem.optionLink);
+      },
+      colorPrimary: activeColor
+    }, optionItem.option);
+  })) : null);
+};
+
 var Tabs = function Tabs(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
@@ -3121,34 +3218,80 @@ var Tabs = function Tabs(_ref) {
       openMenu = _useState[0],
       setOpenMenu = _useState[1];
 
+  var _useState2 = React.useState(-1),
+      activeDropdown = _useState2[0],
+      setActiveDropdown = _useState2[1];
+
+  var _useState3 = React.useState(-1),
+      hoverOverDropdown = _useState3[0],
+      setHoverOverDropdown = _useState3[1];
+
+  var onClickHandler = function onClickHandler(value) {
+    setOpenMenu(value);
+
+    if (onShowMenu) {
+      onShowMenu(value);
+    }
+  };
+
+  var isActiveDropdown = function isActiveDropdown(i) {
+    var isHoverOver = i === hoverOverDropdown;
+    var noneIsHoverOver = hoverOverDropdown === -1;
+    var isActive = i === activeDropdown;
+    return isHoverOver || noneIsHoverOver && isActive;
+  };
+
   var onChangeHandler = function onChangeHandler(link) {
     if (onChange) {
       onChange(link);
     }
+
+    onResetActive();
   };
 
-  var onClickHandler = function onClickHandler(value) {
-    setOpenMenu(value);
+  var onResetActive = function onResetActive() {
+    setActiveDropdown(-1);
+    setHoverOverDropdown(-1);
+  };
 
-    if (onShowMenu) {
-      onShowMenu(value);
+  var onDropdownClick = function onDropdownClick(i, link) {
+    var nextActive = i === activeDropdown ? -1 : i;
+    setActiveDropdown(nextActive);
+    if (onChange && link) onChange(link);
+  };
+
+  var onDropdownMouseEnter = function onDropdownMouseEnter(i) {
+    if (!showMenu) {
+      setHoverOverDropdown(i);
+    }
+  };
+
+  var onDropdownMouseLeave = function onDropdownMouseLeave() {
+    if (!showMenu) {
+      setHoverOverDropdown(-1);
     }
   };
 
   return /*#__PURE__*/React__default.createElement(TabsContainer, null, /*#__PURE__*/React__default.createElement(ItemsContainer, {
     showMenu: showMenu
-  }, items.map(function (item) {
-    return /*#__PURE__*/React__default.createElement(Dropdown, {
-      key: "key-" + Math.random(),
-      title: item.title,
-      titleLink: item.titleLink,
+  }, items.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(ControlledDropdown, {
+      key: "key-" + item.title,
+      text: item.title,
       options: item.options,
-      onChange: function onChange(link) {
-        return onChangeHandler(link);
+      onClick: function onClick() {
+        return onDropdownClick(index, item.titleLink);
       },
-      isMobileBehaviour: showMenu,
-      withIcon: item.options && item.options.length > 0 ? 'right' : 'none',
-      colorPrimary: colorPrimary
+      onOptionClick: onChangeHandler,
+      onMouseEnter: function onMouseEnter() {
+        return onDropdownMouseEnter(index);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return onDropdownMouseLeave();
+      },
+      onReset: onResetActive,
+      active: isActiveDropdown(index),
+      activeColor: colorPrimary
     });
   })), !showMenu && /*#__PURE__*/React__default.createElement(MenuContainer$1, {
     colorPrimary: colorPrimary
@@ -3168,23 +3311,23 @@ var Tabs = function Tabs(_ref) {
   }, "MENU"))));
 };
 
-var _templateObject$q, _templateObject2$b, _templateObject3$6, _templateObject4$3, _templateObject5$1, _templateObject6$1;
-var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100px;\n  background-color: var(--base-color-white);\n\n  @media ", " {\n    column-gap: 12px;\n    height: 80px;\n  }\n"])), devices.mobile);
-var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
-var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$6 || (_templateObject3$6 = /*#__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 _templateObject$r, _templateObject2$c, _templateObject3$7, _templateObject4$3, _templateObject5$1, _templateObject6$1;
+var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100px;\n  background-color: var(--base-color-white);\n\n  @media ", " {\n    column-gap: 12px;\n    height: 80px;\n  }\n"])), devices.mobile);
+var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
+var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--base-color-navigation);\n    }\n  }\n"])));
 var InputContainer = /*#__PURE__*/styled__default.div(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-search);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--base-color-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n"])), devices.mobile);
 var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  height: 24px;\n  width: 24px;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 
-var _templateObject$r, _templateObject2$c;
-var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\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  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n"])), function (_ref) {
+var _templateObject$s, _templateObject2$d;
+var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\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  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
 }, function (_ref2) {
   var color = _ref2.color;
   return color;
 });
-var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
+var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
 
 var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
 
@@ -3354,7 +3497,7 @@ var Navigation = function Navigation(_ref) {
     urlLink: logoLink
   }))), /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
-    columnSpanDesktop: 13,
+    columnSpanDesktop: 12,
     columnStartDevice: 4,
     columnSpanDevice: 10
   }, /*#__PURE__*/React__default.createElement(MenuContainer, null, /*#__PURE__*/React__default.createElement(NavTopContainer, null, /*#__PURE__*/React__default.createElement(NavTop, {
@@ -3393,18 +3536,18 @@ var Navigation = function Navigation(_ref) {
   })))));
 };
 
-var _templateObject$s, _templateObject2$d, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$2;
-var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n"])));
-var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-height);\n  padding-top: var(--footer-padding-top);\n  padding-bottom: var(--footer-padding-bottom);\n  display: grid;\n  grid-template-rows:\n    min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n      --footer-vertical-spacing-sm\n    )\n    min-content;\n  grid-template-areas:\n    'row1'\n    '.'\n    'row2'\n    '.'\n    'row3'\n    '.'\n    'row4';\n"])));
-var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$7 || (_templateObject3$7 = /*#__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 _templateObject$t, _templateObject2$e, _templateObject3$8, _templateObject4$4, _templateObject5$2, _templateObject6$2;
+var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n"])));
+var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-height);\n  padding-top: var(--footer-padding-top);\n  padding-bottom: var(--footer-padding-bottom);\n  display: grid;\n  grid-template-rows:\n    min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n      --footer-vertical-spacing-sm\n    )\n    min-content;\n  grid-template-areas:\n    'row1'\n    '.'\n    'row2'\n    '.'\n    'row3'\n    '.'\n    'row4';\n"])));
+var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row1;\n  justify-self: center;\n\n  @media ", " {\n    & {\n      justify-self: start;\n      grid-area: row2;\n    }\n  }\n"])), devices.mobile);
 var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row2;\n\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), devices.mobile);
 var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row3;\n  justify-self: center;\n\n  @media ", " {\n    justify-self: start;\n  }\n"])), devices.mobile);
 var AdditionalInfo = /*#__PURE__*/styled__default.p(_templateObject6$2 || (_templateObject6$2 = /*#__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$t, _templateObject2$e, _templateObject3$8;
-var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 auto;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  gap: var(--footer-items-gap);\n\n  @media ", " {\n    & {\n      margin: 0;\n      flex-direction: column;\n    }\n  }\n"])), devices.mobile);
-var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  text-align: center;\n\n  @media ", " {\n    & {\n      text-align: left;\n    }\n  }\n"])), devices.mobile);
-var PolicyLink = /*#__PURE__*/styled__default.a(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: fit-content;\n  text-decoration: none;\n  text-transform: uppercase;\n  color: var(--base-color-white);\n  cursor: pointer;\n"])));
+var _templateObject$u, _templateObject2$f, _templateObject3$9;
+var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 auto;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  gap: var(--footer-items-gap);\n\n  @media ", " {\n    & {\n      margin: 0;\n      flex-direction: column;\n    }\n  }\n"])), devices.mobile);
+var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  text-align: center;\n\n  @media ", " {\n    & {\n      text-align: left;\n    }\n  }\n"])), devices.mobile);
+var PolicyLink = /*#__PURE__*/styled__default.a(_templateObject3$9 || (_templateObject3$9 = /*#__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,
@@ -3420,10 +3563,10 @@ var PolicyLinks = function PolicyLinks(_ref) {
   }));
 };
 
-var _templateObject$u, _templateObject2$f, _templateObject3$9, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$1, _templateObject8$1;
-var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n  grid-template-rows: 100px;\n  gap: 0;\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content min-content;\n      gap: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
-var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2;\n  justify-self: center;\n  height: 100%;\n  border: 1px solid var(--base-color-white);\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      display: none;\n    }\n  }\n"])), devices.mobile);
-var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$9 || (_templateObject3$9 = /*#__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 _templateObject$v, _templateObject2$g, _templateObject3$a, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$1, _templateObject8$1;
+var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n  grid-template-rows: 100px;\n  gap: 0;\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content min-content;\n      gap: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
+var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2;\n  justify-self: center;\n  height: 100%;\n  border: 1px solid var(--base-color-white);\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      display: none;\n    }\n  }\n"])), devices.mobile);
+var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1;\n  padding-top: 9px;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      align-items: start;\n      justify-self: start;\n      padding-top: 0;\n    }\n  }\n"])), devices.mobile);
 var SignUpText = /*#__PURE__*/styled__default.p(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-body-2);\n  line-height: var(--line-height-body-2);\n  width: 60%;\n  margin: 0 auto;\n  height: 60px;\n  text-align: center;\n\n  @media ", " {\n    & {\n      width: 100%;\n      height: auto;\n      text-align: left;\n      font-size: 14px;\n      margin-bottom: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
 var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 3;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 9px;\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      align-items: start;\n      justify-self: start;\n      padding-top: 0;\n    }\n  }\n"])), devices.mobile);
 var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject6$3 || (_templateObject6$3 = /*#__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);
@@ -3494,10 +3637,10 @@ var Footer = function Footer(_ref) {
   }, additionalInfo)))));
 };
 
-var _templateObject$v, _templateObject2$g, _templateObject3$a, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10, _templateObject11;
-var AnchorTapbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  background-color: var(--base-color-white);\n  z-index: 10;\n"])));
-var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
-var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      height: 50px;\n    }\n  }\n"])), devices.mobile);
+var _templateObject$w, _templateObject2$h, _templateObject3$b, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10, _templateObject11;
+var AnchorTapbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), zIndexes.anchor);
+var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
+var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      height: 50px;\n    }\n  }\n"])), devices.mobile);
 var ButtonsDesktopGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
 var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
@@ -3669,11 +3812,161 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
   })) : null) : null))), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : null);
 };
 
-var _templateObject$w, _templateObject2$h, _templateObject3$b, _templateObject4$7, _templateObject5$5;
-var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
-var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n"])), devices.mobile);
-var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && a {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 28px 20px;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
+var CarouselType;
+
+(function (CarouselType) {
+  CarouselType["Image"] = "image";
+  CarouselType["SmallCard"] = "SmallCard";
+  CarouselType["LargeCard"] = "LargeCard";
+})(CarouselType || (CarouselType = {}));
+
+var _templateObject$x, _templateObject2$i, _templateObject3$c, _templateObject4$7;
+var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    ", "\n  }\n"])), function (_ref) {
+  var type = _ref.type,
+      imagesHeightDesktop = _ref.imagesHeightDesktop;
+
+  if (type !== CarouselType.Image) {
+    var numberOfGaps = type === CarouselType.LargeCard ? 4 : 3;
+    var numberOfColumns = type === CarouselType.LargeCard ? 5 : 4;
+    var gapsSpace = "calc(var(--grid-column-gap) * " + numberOfGaps + ")";
+    var gapsInMainGraid = 'calc(11 * var(--grid-column-gap))';
+    var calcColumns = "calc(calc(80% - " + gapsInMainGraid + ") * " + numberOfColumns + " / 12)";
+    return "\n      & {\n        .swiper-slide {\n          width: calc(" + calcColumns + " + " + gapsSpace + " - 1px);\n          margin-right: var(--grid-column-gap);\n          -webkit-transform: translate3d(0, 0, 0);\n        }\n      }\n    ";
+  } else {
+    return "\n      & {\n        .swiper-slide {\n          height: fit-content;\n          width: auto;\n          margin-right: var(--grid-column-gap);\n          -webkit-transform: translate3d(0, 0, 0);\n\n          > div {\n            height: " + imagesHeightDesktop + "px;\n          }\n        }\n      }\n    ";
+  }
+}, devices.mobile, function (_ref2) {
+  var active = _ref2.active,
+      type = _ref2.type,
+      imagesHeightDevice = _ref2.imagesHeightDevice;
+
+  if (type !== CarouselType.Image) {
+    var gapsSpace = 'calc(var(--grid-column-gap) * 9)';
+    var numberOfColumns = 10;
+    var gapsInMainGraid = 'calc(11 * var(--grid-column-gap))';
+    var mainGridWidth = 'calc(100% - calc(2 * var(--grid-margin)))';
+    var columnWidth = "calc(calc(" + mainGridWidth + " - " + gapsInMainGraid + ") / 12)";
+    var calcColumns = "calc(" + columnWidth + " * " + numberOfColumns + ")";
+    var marginRight = active ? "calc(calc(var(--grid-column-gap) * 2) + " + columnWidth + ")" : "calc(calc(" + columnWidth + " * 2) + var(--grid-column-gap))";
+    return "\n        && {\n          .swiper-slide {\n            width: calc(" + calcColumns + " + " + gapsSpace + " - 1px);\n            margin-right: " + marginRight + ";\n            -webkit-transform: translate3d(0, 0, 0);\n          }\n        }";
+  } else {
+    return "\n        &&& {\n          .swiper-slide > div{\n            height: " + imagesHeightDevice + "px;\n          }\n        }";
+  }
+});
+var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
+var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  h3 {\n    padding: 0;\n    margin: 0;\n  }\n"])));
+var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+
+var Carousel = function Carousel(_ref) {
+  var children = _ref.children,
+      type = _ref.type,
+      _ref$imagesHeightDesk = _ref.imagesHeightDesktop,
+      imagesHeightDesktop = _ref$imagesHeightDesk === void 0 ? 500 : _ref$imagesHeightDesk,
+      _ref$imagesHeightDevi = _ref.imagesHeightDevice,
+      imagesHeightDevice = _ref$imagesHeightDevi === void 0 ? 300 : _ref$imagesHeightDevi,
+      title = _ref.title;
+
+  var _useState = React.useState(),
+      swiper = _useState[0],
+      setSwiper = _useState[1];
+
+  var _useState2 = React.useState(0),
+      slidesOffsetBefore = _useState2[0],
+      setSlidesOffsetBefore = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      loop = _useState3[0],
+      setLoop = _useState3[1];
+
+  React.useEffect(function () {
+    var updateWindowDimensions = function updateWindowDimensions() {
+      if (window.matchMedia(devices.mobile).matches) {
+        setSlidesOffsetBefore(20); // Mobile margin grid
+      } else if (window.matchMedia(devices.tablet).matches) {
+        setSlidesOffsetBefore(50); // Tablet margin grid
+      } else {
+        setSlidesOffsetBefore(Math.floor(window.innerWidth * 0.1) - 3); // 10% of width
+      }
+    };
+
+    window.addEventListener('resize', updateWindowDimensions);
+    updateWindowDimensions();
+    return function () {
+      window.removeEventListener('resize', updateWindowDimensions);
+
+      if (swiper) {
+        swiper.destroy();
+      }
+    };
+  }, []);
+
+  var onNext = function onNext() {
+    if (swiper) {
+      swiper.slideNext();
+    }
+  };
+
+  var onPrev = function onPrev() {
+    if (swiper) {
+      swiper.slidePrev();
+    }
+  };
+
+  var onSwiper = function onSwiper(s) {
+    s.on('beforeTransitionStart', function () {
+      if (!loop) {
+        setLoop(true);
+      }
+    });
+    setSwiper(s);
+  };
+
+  return /*#__PURE__*/React__default.createElement(CarouselWrapper, {
+    active: loop,
+    type: type,
+    imagesHeightDevice: imagesHeightDevice,
+    imagesHeightDesktop: imagesHeightDesktop
+  }, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 3,
+    columnSpanDesktop: 10,
+    columnStartDevice: 2,
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(TitleWrapper, {
+    "data-testid": "carousel-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 3
+  }, title))), /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 14,
+    columnSpanDesktop: 2,
+    columnStartDevice: 14
+  }, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
+    "data-testid": "carousel-buttons-wrapper"
+  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    onClickNext: onNext,
+    onClickPrev: onPrev,
+    availablePrev: loop
+  })))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 1,
+    columnSpanDesktop: 16,
+    columnStartDevice: 1,
+    columnSpanDevice: 14
+  }, /*#__PURE__*/React__default.createElement(swiperReact_js.Swiper, {
+    slidesPerView: "auto",
+    slidesOffsetBefore: slidesOffsetBefore,
+    loop: loop,
+    loopedSlides: React__default.Children.count(children),
+    onSwiper: onSwiper,
+    "data-testid": "carousel-swiper"
+  }, React__default.Children.map(children, function (child) {
+    return /*#__PURE__*/React__default.createElement(swiperReact_js.SwiperSlide, null, child);
+  })))));
+};
+
+var _templateObject$y, _templateObject2$j, _templateObject3$d, _templateObject4$8, _templateObject5$5;
+var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
+var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n"])), devices.mobile);
+var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && a {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 28px 20px;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
 var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n"])));
 
 var Accordion = function Accordion(_ref) {
@@ -3716,8 +4009,8 @@ var Accordion = function Accordion(_ref) {
   }, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
 };
 
-var _templateObject$x;
-var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$z;
+var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 
 var Accordions = function Accordions(_ref) {
   var _ref$items = _ref.items,
@@ -3736,21 +4029,27 @@ var Accordions = function Accordions(_ref) {
   }));
 };
 
-var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$3;
+var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$9, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$3;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT = 19;
 var LENGTH_TEXT_TABLET = 10;
-var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
-var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: var(--base-color-primary);\n  position: absolute;\n  width: 100%;\n  z-index: 10;\n"])));
-var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
-var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobile);
+var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: var(--base-color-primary);\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), zIndexes.contentOverlay);
+var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
+var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__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 (_ref) {
+  var fullWidth = _ref.fullWidth;
+  return fullWidth ? '0' : '20px';
+}, function (_ref2) {
+  var fullWidth = _ref2.fullWidth;
+  return fullWidth ? '0' : '20px';
+});
 var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n"])));
 var TextContainer = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__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    font-style: normal;\n  }\n"])));
 var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject7$3 || (_templateObject7$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 ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref) {
-  var size = _ref.size,
-      primaryButtonTextLength = _ref.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref.tertiaryButtonTextLength;
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref3) {
+  var size = _ref3.size,
+      primaryButtonTextLength = _ref3.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
   var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -3758,9 +4057,9 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 ||
   }
 
   return '';
-}, devices.mobile, devices.tablet, function (_ref2) {
-  var primaryButtonTextLength = _ref2.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref2.tertiaryButtonTextLength;
+}, devices.mobile, devices.tablet, function (_ref4) {
+  var primaryButtonTextLength = _ref4.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref4.tertiaryButtonTextLength;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
 
   if (isLinksLayoutColumnTablet) {
@@ -3770,13 +4069,13 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 ||
   return '';
 });
 
-var _templateObject$z, _templateObject2$j, _templateObject3$d;
-var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])));
-var ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-progress);\n  flex: ", ";\n"])), function (_ref) {
+var _templateObject$B, _templateObject2$l, _templateObject3$f;
+var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])));
+var ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-progress);\n  flex: ", ";\n"])), function (_ref) {
   var progress = _ref.progress;
   return progress;
 });
-var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  opacity: 0.5;\n  flex: ", ";\n"])), function (_ref2) {
+var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  opacity: 0.5;\n  flex: ", ";\n"])), function (_ref2) {
   var progress = _ref2.progress;
   return progress;
 });
@@ -3813,7 +4112,9 @@ var Card = function Card(_ref) {
       _ref$withContinueWatc = _ref.withContinueWatching,
       withContinueWatching = _ref$withContinueWatc === void 0 ? false : _ref$withContinueWatc,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'small' : _ref$size;
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth;
 
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
@@ -3875,14 +4176,16 @@ var Card = function Card(_ref) {
     alt: "test"
   })), withContinueWatching && /*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
     progress: progress
-  }))), /*#__PURE__*/React__default.createElement(ContentContainer$1, null, /*#__PURE__*/React__default.createElement("a", {
+  }))), /*#__PURE__*/React__default.createElement(ContentContainer$1, {
+    fullWidth: fullWidth
+  }, /*#__PURE__*/React__default.createElement("a", {
     href: primaryButton == null ? void 0 : primaryButton.href,
     target: primaryButton == null ? void 0 : primaryButton.target,
     className: "targetLink"
   }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
     list: tags
   }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement(Header, {
-    level: size === 'small' ? 6 : 5
+    level: 6
   }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer, {
     dangerouslySetInnerHTML: {
       __html: truncate(text, 130)
@@ -3896,9 +4199,9 @@ var Card = function Card(_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$A, _templateObject2$k;
-var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n     {\n      grid-row-gap: var(--cards-spacing-stack);\n    }\n  }\n"])), devices.mobile);
-var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n     {\n      grid-column: 1 / span 14;\n    }\n  }\n"])), devices.mobile);
+var _templateObject$C, _templateObject2$m;
+var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n     {\n      grid-row-gap: var(--cards-spacing-stack);\n    }\n  }\n"])), devices.mobile);
+var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n     {\n      grid-column: 1 / span 14;\n    }\n  }\n"])), devices.mobile);
 
 var Cards = function Cards(_ref) {
   var cards = _ref.cards,
@@ -3935,20 +4238,20 @@ var Cards = function Cards(_ref) {
   }));
 };
 
-var _templateObject$B, _templateObject2$l, _templateObject3$e, _templateObject4$9, _templateObject5$7;
-var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__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$D, _templateObject2$n, _templateObject3$g, _templateObject4$a, _templateObject5$7;
+var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-column-gap);\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content 24px min-content;\n      grid-template-areas:\n        'row1'\n        '.'\n        'row2';\n    }\n  }\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
 }, devices.mobile);
-var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
+var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$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"])), function (_ref3) {
+var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$9 || (_templateObject4$9 = /*#__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 EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
 var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$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: 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    font-style: normal;\n  }\n"])));
 
 var Editorial = function Editorial(_ref) {
@@ -3989,14 +4292,14 @@ var Theme = function Theme(_ref) {
   }, children);
 };
 
-var _templateObject$C, _templateObject2$m, _templateObject3$f, _templateObject4$a, _templateObject5$8, _templateObject6$6, _templateObject7$4;
-var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+var _templateObject$E, _templateObject2$o, _templateObject3$h, _templateObject4$b, _templateObject5$8, _templateObject6$6, _templateObject7$4;
+var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, devices.mobile);
-var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$m || (_templateObject2$m = /*#__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 = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
-var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 36px;\n\n  @media ", " {\n    & {\n      height: 30px;\n    }\n  }\n"])), devices.mobile);
+var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
+var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
+var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 36px;\n\n  @media ", " {\n    & {\n      height: 30px;\n    }\n  }\n"])), devices.mobile);
 var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  font-family: var(--font-family-alt-header);\n  font-size: var(--font-size-alt-header-6);\n  font-weight: var(--font-weight-alt-header-6);\n  line-height: var(--line-height-alt-header-6);\n  letter-spacing: var(--letter-spacing-alt-header-6);\n  text-transform: var(--text-transform-alt-header-6);\n  margin-top: 12px;\n"])));
 var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
 var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__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);
@@ -4019,7 +4322,7 @@ var PageHeading = function PageHeading(_ref) {
   var truncatedTitle = title.substring(0, 40);
   return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
     "data-testid": "page-heading-wrapper"
-  }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper, {
+  }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
     "data-testid": "page-heading-title"
   }, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, null, children) : null, /*#__PURE__*/React__default.createElement(Header, {
     level: 2
@@ -4068,21 +4371,21 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
 };
 
-var _templateObject$D, _templateObject2$n, _templateObject3$g, _templateObject4$b, _templateObject5$9, _templateObject6$7, _templateObject7$5;
-var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--base-color-black);\n    filter: opacity(40%);\n    z-index: 1;\n  }\n\n  @media ", " {\n    & {\n      aspect-ratio: 1 / 1;\n      background-image: url('", "');\n      background-size: 100% 100%;\n      display: flex;\n      align-items: start;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$F, _templateObject2$p, _templateObject3$i, _templateObject4$c, _templateObject5$9, _templateObject6$7, _templateObject7$5;
+var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--base-color-black);\n    filter: opacity(40%);\n    z-index: ", ";\n  }\n\n  @media ", " {\n    & {\n      aspect-ratio: 1 / 1;\n      background-image: url('", "');\n      background-size: 100% 100%;\n      display: flex;\n      align-items: start;\n    }\n  }\n"])), function (_ref) {
   var bgUrlDesktop = _ref.bgUrlDesktop;
   return bgUrlDesktop;
-}, devices.mobile, function (_ref2) {
+}, zIndexes.content, devices.mobile, function (_ref2) {
   var bgUrlDesktop = _ref2.bgUrlDesktop,
       bgUrlDevice = _ref2.bgUrlDevice;
   return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
 });
-var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  z-index: 2;\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 . . . . . .'\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 . . . .'\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    & {\n      grid-template-areas:\n        '. . . . . 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 . .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
-var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: 2;\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), devices.mobile);
-var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
+var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 . . . . . .'\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 . . . .'\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    & {\n      grid-template-areas:\n        '. . . . . 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 . .';\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
+var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__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.contentOverlay, devices.mobile);
+var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
 var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__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(3 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(3 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-5);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$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: 0;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
-var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: 2;\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    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"])), devices.mobile, devices.tablet);
+var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$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    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$c = ["text"];
 
@@ -4144,9 +4447,9 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
 };
 
-var _templateObject$E, _templateObject2$o;
-var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-people-listing-role);\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  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
-var NameWrapper = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-people-listing-name);\n  font-size: var(--font-size-individual-listing-name);\n  font-weight: var(--font-weight-listing-name);\n  line-height: var(--line-height-individual-listing-name);\n  letter-spacing: var(--letter-spacing-body-1);\n  overflow-wrap: break-word;\n\n  & a {\n    color: var(--base-color-black);\n\n    :hover {\n      color: var(--base-color-primary);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
+var _templateObject$G, _templateObject2$q;
+var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-people-listing-role);\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  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
+var NameWrapper = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-people-listing-name);\n  font-size: var(--font-size-individual-listing-name);\n  font-weight: var(--font-weight-listing-name);\n  line-height: var(--line-height-individual-listing-name);\n  letter-spacing: var(--letter-spacing-body-1);\n  overflow-wrap: break-word;\n\n  & a {\n    color: var(--base-color-black);\n\n    :hover {\n      color: var(--base-color-primary);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
 
 var IndividualListing = function IndividualListing(_ref) {
   var role = _ref.role,
@@ -4163,8 +4466,8 @@ var IndividualListing = function IndividualListing(_ref) {
   }, name) : name));
 };
 
-var _templateObject$F;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
+var _templateObject$H;
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
 
 var PeopleListing = function PeopleListing(_ref) {
   var people = _ref.people;
@@ -4184,25 +4487,25 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$G, _templateObject2$p, _templateObject3$h, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$6;
+var _templateObject$I, _templateObject2$r, _templateObject3$j, _templateObject4$d, _templateObject5$a, _templateObject6$8, _templateObject7$6;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
+var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$I || (_templateObject$I = /*#__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 .'" : "'. left left left left left . right right right right right right right'";
 }, devices.mobile);
-var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref3) {
+var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref4) {
+var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
+var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
 var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
 var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 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    font-style: normal;\n  }\n"])));
 var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__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) {
@@ -4292,8 +4595,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$H;
-var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__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$J;
+var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__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,
@@ -4319,8 +4622,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description))));
 };
 
-var _templateObject$I;
-var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__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    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  & ul {\n    padding: 0;\n    list-style: none;\n    margin-left: 20px;\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 0px;\n    margin-left: 20px;\n  }\n\n  & li {\n    text-indent: -20px;\n    line-height: var(--line-height-listing);\n  }\n"])));
+var _templateObject$K;
+var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__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    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  & ul {\n    padding: 0;\n    list-style: none;\n    margin-left: 20px;\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 0px;\n    margin-left: 20px;\n  }\n\n  & li {\n    text-indent: -20px;\n    line-height: var(--line-height-listing);\n  }\n"])));
 
 var TextOnly = function TextOnly(_ref) {
   var _ref$text = _ref.text,
@@ -4345,8 +4648,21 @@ var TextOnly = function TextOnly(_ref) {
   })));
 };
 
-var _templateObject$J;
-var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n\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-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    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n    }\n\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
+var _templateObject$L, _templateObject2$s;
+var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__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  }\n"])), ImageAspectRatioWrapper);
+var CaptionWrapper = /*#__PURE__*/styled__default.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 ImageWithCaption = function ImageWithCaption(_ref) {
+  var caption = _ref.caption,
+      children = _ref.children,
+      aspectRatio = _ref.aspectRatio;
+  return /*#__PURE__*/React__default.createElement(Wrapper$2, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: aspectRatio
+  }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
+};
+
+var _templateObject$M;
+var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n\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-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    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\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) {
@@ -5217,7 +5533,9 @@ exports.Accordions = Accordions;
 exports.AltHeader = AltHeader;
 exports.AnchorTapBar = AnchorTapBar;
 exports.BodyText = BodyText;
+exports.Card = Card;
 exports.Cards = Cards;
+exports.Carousel = Carousel;
 exports.CinemaBadge = CinemaBadge;
 exports.Editorial = Editorial;
 exports.Footer = Footer;
@@ -5226,6 +5544,7 @@ exports.Grid = Grid;
 exports.GridItem = GridItem;
 exports.Header = Header;
 exports.Icon = Icon;
+exports.ImageWithCaption = ImageWithCaption;
 exports.Navigation = Navigation;
 exports.Overline = Overline;
 exports.PageHeadingCinema = PageHeadingCinema;