@royaloperahouse/chord 0.7.7 → 0.7.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/chord.cjs.development.js +92 -73
  3. package/dist/chord.cjs.development.js.map +1 -1
  4. package/dist/chord.cjs.production.min.js +1 -1
  5. package/dist/chord.cjs.production.min.js.map +1 -1
  6. package/dist/chord.esm.js +92 -73
  7. package/dist/chord.esm.js.map +1 -1
  8. package/dist/components/organisms/Carousel/Carousel.style.d.ts +1 -0
  9. package/dist/components/organisms/HighlightsCarousel/HighlightsCarousel.style.d.ts +1 -0
  10. package/dist/components/organisms/Navigation/Navigation.style.d.ts +2 -0
  11. package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +6 -3
  12. package/dist/types/navigation.d.ts +16 -0
  13. package/package.json +1 -1
package/dist/chord.esm.js CHANGED
@@ -116,19 +116,19 @@ var common = {
116
116
  },
117
117
  subtitles: {
118
118
  1: '18px',
119
- 2: '12px'
119
+ 2: '14px'
120
120
  },
121
121
  titleDescription: '20px',
122
122
  body: {
123
- 1: '17px',
124
- 2: '14px',
125
- 3: '12px'
123
+ 1: '19px',
124
+ 2: '16px',
125
+ 3: '14px'
126
126
  },
127
- listing: '17px',
127
+ listing: '19px',
128
128
  buttons: '14px',
129
129
  overline: {
130
- 1: '12px',
131
- 2: '10px'
130
+ 1: '14px',
131
+ 2: '12px'
132
132
  },
133
133
  navigation: '13px',
134
134
  search: '24px'
@@ -184,16 +184,16 @@ var common = {
184
184
  },
185
185
  titleDescription: '28px',
186
186
  body: {
187
- 1: '24px',
187
+ 1: '26px',
188
188
  2: '22px',
189
- 3: '18px'
189
+ 3: '20px'
190
190
  },
191
191
  peopleListing: '24px',
192
- listing: '34px',
192
+ listing: '36px',
193
193
  buttons: '20px',
194
194
  overline: {
195
- 1: '14px',
196
- 2: '12px'
195
+ 1: '16px',
196
+ 2: '14px'
197
197
  },
198
198
  navigation: '16px'
199
199
  },
@@ -283,20 +283,20 @@ var common = {
283
283
  6: '17px'
284
284
  },
285
285
  subtitles: {
286
- 1: '15px',
287
- 2: '12px'
286
+ 1: '16px',
287
+ 2: '14px'
288
288
  },
289
289
  titleDescription: '17px',
290
290
  body: {
291
- 1: '16px',
291
+ 1: '17px',
292
292
  2: '12px',
293
293
  3: '11px'
294
294
  },
295
295
  listing: '16px',
296
296
  buttons: '14px',
297
297
  overline: {
298
- 1: '12px',
299
- 2: '10px'
298
+ 1: '14px',
299
+ 2: '12px'
300
300
  },
301
301
  navigation: '13px',
302
302
  search: '20px'
@@ -347,20 +347,20 @@ var common = {
347
347
  6: '24px'
348
348
  },
349
349
  subtitles: {
350
- 1: '22px',
351
- 2: '16px'
350
+ 1: '24px',
351
+ 2: '18px'
352
352
  },
353
353
  titleDescription: '24px',
354
354
  body: {
355
- 1: '22px',
355
+ 1: '24px',
356
356
  2: '18px',
357
357
  3: '16px'
358
358
  },
359
359
  listing: '34px',
360
360
  buttons: '20px',
361
361
  overline: {
362
- 1: '14px',
363
- 2: '12px'
362
+ 1: '16px',
363
+ 2: '14px'
364
364
  },
365
365
  navigation: '16px'
366
366
  },
@@ -2190,7 +2190,7 @@ var CinemaBadge = function CinemaBadge(_ref) {
2190
2190
  }))));
2191
2191
  };
2192
2192
 
2193
- var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
2193
+ var zLevels = ['base', 'content', 'contentOverlay', 'sponsorship', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
2194
2194
  var zIndexes = {};
2195
2195
  zLevels.forEach(function (name, index) {
2196
2196
  zIndexes[name] = index;
@@ -3054,8 +3054,8 @@ var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$m || (_templateOb
3054
3054
  var IconWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
3055
3055
  var theme = _ref.theme;
3056
3056
  return theme.colors.primary;
3057
- }, devices.mobileAndTablet);
3058
- var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobileAndTablet);
3057
+ }, devices.mobile);
3058
+ var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobile);
3059
3059
 
3060
3060
  var RotatorButtons = function RotatorButtons(_ref) {
3061
3061
  var onClickPrev = _ref.onClickPrev,
@@ -3119,17 +3119,24 @@ var RotatorButtons = function RotatorButtons(_ref) {
3119
3119
  }, renderNextIcon()));
3120
3120
  };
3121
3121
 
3122
- var _templateObject$n, _templateObject2$9, _templateObject3$4, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
3123
- var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__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);
3124
- var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$9 || (_templateObject2$9 = /*#__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);
3125
- var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateObject3$4 = /*#__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);
3126
- var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject4$1 || (_templateObject4$1 = /*#__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);
3127
- var NavigationGridMobile = /*#__PURE__*/styled(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);
3128
- var LogoContainer = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 140px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &&& .logoImg {\n height: 96px;\n width: 66px;\n }\n\n @media ", " {\n height: 80px;\n\n &&& .logoImg {\n width: 100%;\n height: 64px;\n }\n }\n"])), devices.mobile);
3129
- var MenuContainer = /*#__PURE__*/styled.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);
3130
- var NavContainer = /*#__PURE__*/styled.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);
3131
- var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
3132
- var NavTopContainer = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__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);
3122
+ var _templateObject$n, _templateObject2$9, _templateObject3$4, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
3123
+ var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
3124
+ var isMenuOpen = _ref.isMenuOpen;
3125
+ return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--base-color-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
3126
+ });
3127
+ var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateObject2$9 = /*#__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);
3128
+ var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$4 || (_templateObject3$4 = /*#__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);
3129
+ var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$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);
3130
+ var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5 || (_templateObject5 = /*#__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);
3131
+ var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-top: ", ";\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet, function (_ref2) {
3132
+ var theme = _ref2.theme;
3133
+ return theme.spacing[12];
3134
+ });
3135
+ var LogoContainer = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 140px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &&& .logoImg {\n height: 96px;\n width: 66px;\n }\n\n @media ", " {\n height: 80px;\n\n &&& .logoImg {\n width: 100%;\n height: 64px;\n }\n }\n"])), devices.mobile);
3136
+ var MenuContainer = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__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);
3137
+ var NavContainer = /*#__PURE__*/styled.div(_templateObject9 || (_templateObject9 = /*#__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);
3138
+ var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
3139
+ var NavTopContainer = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
3133
3140
 
3134
3141
  var _templateObject$o;
3135
3142
  var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
@@ -3825,7 +3832,9 @@ var Navigation = function Navigation(_ref) {
3825
3832
  setshowSearch(false);
3826
3833
  };
3827
3834
 
3828
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showSearch && /*#__PURE__*/React__default.createElement(FullScreenContainer, {
3835
+ return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
3836
+ isMenuOpen: showMenu
3837
+ }, showSearch && /*#__PURE__*/React__default.createElement(FullScreenContainer, {
3829
3838
  style: {
3830
3839
  height: "" + fullScreenHeight
3831
3840
  }
@@ -4158,7 +4167,7 @@ var CarouselType;
4158
4167
  CarouselType["LargeCard"] = "LargeCard";
4159
4168
  })(CarouselType || (CarouselType = {}));
4160
4169
 
4161
- var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8;
4170
+ var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8, _templateObject5$5;
4162
4171
  var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (_ref) {
4163
4172
  var type = _ref.type,
4164
4173
  imagesHeightDesktop = _ref.imagesHeightDesktop;
@@ -4193,7 +4202,8 @@ var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObj
4193
4202
  });
4194
4203
  var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile);
4195
4204
  var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n user-select: text;\n\n h4 {\n padding: 0;\n margin: 0;\n }\n"])));
4196
- var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
4205
+ var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
4206
+ var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 2 / span 10;\n }\n }\n"])), devices.tablet);
4197
4207
 
4198
4208
  var Carousel = function Carousel(_ref) {
4199
4209
  var children = _ref.children,
@@ -4264,7 +4274,7 @@ var Carousel = function Carousel(_ref) {
4264
4274
  type: type,
4265
4275
  imagesHeightDevice: imagesHeightDevice,
4266
4276
  imagesHeightDesktop: imagesHeightDesktop
4267
- }, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
4277
+ }, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(TitleGridItem, {
4268
4278
  columnStartDesktop: 3,
4269
4279
  columnSpanDesktop: 10,
4270
4280
  columnStartDevice: 2,
@@ -4276,7 +4286,8 @@ var Carousel = function Carousel(_ref) {
4276
4286
  }, title))), /*#__PURE__*/React__default.createElement(GridItem, {
4277
4287
  columnStartDesktop: 14,
4278
4288
  columnSpanDesktop: 2,
4279
- columnStartDevice: 14
4289
+ columnStartDevice: 12,
4290
+ columnSpanDevice: 2
4280
4291
  }, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
4281
4292
  "data-testid": "carousel-buttons-wrapper"
4282
4293
  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
@@ -4300,7 +4311,7 @@ var Carousel = function Carousel(_ref) {
4300
4311
  })))));
4301
4312
  };
4302
4313
 
4303
- var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1;
4314
+ var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$6, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1;
4304
4315
  var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
4305
4316
  var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n h4 {\n margin: 0;\n padding: 0;\n }\n\n h5 {\n display: none;\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: 40px;\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: var(--line-height-altHeader-5);\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n }\n }\n }\n"])), devices.tablet, function (_ref) {
4306
4317
  var theme = _ref.theme;
@@ -4314,7 +4325,7 @@ var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$j || (_templ
4314
4325
  }, devices.mobile);
4315
4326
  var InfoWrapper = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
4316
4327
  var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
4317
- var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref4) {
4328
+ var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref4) {
4318
4329
  var theme = _ref4.theme;
4319
4330
  return theme.fonts.mobile.sizes.headers[3];
4320
4331
  }, function (_ref5) {
@@ -4368,6 +4379,7 @@ var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$2 || (_templateOb
4368
4379
  var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swiper-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
4369
4380
  var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
4370
4381
  var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
4382
+ var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
4371
4383
 
4372
4384
  var _excluded$8 = ["text"];
4373
4385
 
@@ -4454,7 +4466,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
4454
4466
  tag: "h6"
4455
4467
  }, infoSubtitle), /*#__PURE__*/React__default.createElement(BodyText, {
4456
4468
  level: 1
4457
- }, description)), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
4469
+ }, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
4470
+ dangerouslySetInnerHTML: {
4471
+ __html: description
4472
+ }
4473
+ }))), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
4458
4474
  "data-testid": "carousel-wrapper"
4459
4475
  }, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
4460
4476
  "data-testid": "rotator-buttons"
@@ -4527,29 +4543,34 @@ var HighlightsStream = function HighlightsStream(_ref) {
4527
4543
  })));
4528
4544
  };
4529
4545
 
4530
- var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6, _templateObject6$6, _templateObject7$3;
4546
+ var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject6$6, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2;
4531
4547
  var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
4532
4548
  var sticky = _ref.sticky;
4533
4549
  return sticky ? 'sticky' : 'initial';
4534
4550
  }, zIndexes.anchor);
4535
- var CTAGridWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
4536
- var AnchorTitle = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__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);
4537
- var GridItemTitleWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 2 / span 9;\n }\n }\n"])), devices.tablet);
4538
- var ButtonsDesktopGridItem = /*#__PURE__*/styled(GridItem)(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n @media ", " {\n {\n grid-column: 12 / span 3;\n }\n }\n"])), devices.mobile, devices.tablet);
4539
- var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
4540
- var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref2) {
4541
- var theme = _ref2.theme;
4542
- return theme.colors.primaryButtonReverseBg;
4543
- }, function (_ref3) {
4551
+ var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
4552
+ var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
4553
+ var title = _ref2.title;
4554
+ return title ? 'row' : 'row-reverse';
4555
+ }, devices.tablet, devices.mobile);
4556
+ var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$a || (_templateObject4$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);
4557
+ var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
4558
+ var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
4559
+ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
4544
4560
  var theme = _ref3.theme;
4545
4561
  return theme.colors.primaryButtonReverseBg;
4546
4562
  }, function (_ref4) {
4547
4563
  var theme = _ref4.theme;
4548
- return theme.colors.primaryButtonReverse;
4564
+ return theme.colors.primaryButtonReverseBg;
4549
4565
  }, function (_ref5) {
4550
4566
  var theme = _ref5.theme;
4551
4567
  return theme.colors.primaryButtonReverse;
4568
+ }, function (_ref6) {
4569
+ var theme = _ref6.theme;
4570
+ return theme.colors.primaryButtonReverse;
4552
4571
  });
4572
+ var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
4573
+ var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
4553
4574
 
4554
4575
  var _excluded$b = ["text"],
4555
4576
  _excluded2 = ["text"];
@@ -4558,7 +4579,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
4558
4579
  var title = _ref.title,
4559
4580
  links = _ref.links,
4560
4581
  _ref$sticky = _ref.sticky,
4561
- sticky = _ref$sticky === void 0 ? false : _ref$sticky;
4582
+ sticky = _ref$sticky === void 0 ? false : _ref$sticky,
4583
+ message = _ref.message;
4562
4584
 
4563
4585
  var _ref2 = (links == null ? void 0 : links[0]) || {},
4564
4586
  primaryButtonText = _ref2.text,
@@ -4570,22 +4592,19 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
4570
4592
 
4571
4593
  return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
4572
4594
  sticky: sticky
4573
- }, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(GridItemTitleWrapper, {
4574
- columnStartDesktop: 2,
4575
- columnSpanDesktop: 9,
4576
- columnStartDevice: 2,
4577
- columnSpanDevice: 12
4578
- }, /*#__PURE__*/React__default.createElement(AnchorTitle, {
4595
+ }, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
4596
+ title: title
4597
+ }, title ? /*#__PURE__*/React__default.createElement(AnchorTitle, {
4579
4598
  "data-testid": "anchor-title"
4580
4599
  }, /*#__PURE__*/React__default.createElement(Header, {
4581
4600
  level: 5
4582
- }, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
4583
- columnStartDesktop: 12,
4584
- columnSpanDesktop: 5,
4585
- columnStartDevice: 2,
4586
- columnSpanDevice: 12,
4601
+ }, title)) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopWrapper, {
4587
4602
  "data-testid": "anchor-ctas"
4588
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : null), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : null);
4603
+ }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : message && /*#__PURE__*/React__default.createElement(MessageWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
4604
+ level: 6
4605
+ }, message)))), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : message && /*#__PURE__*/React__default.createElement(MessageWrapperMobile, null, /*#__PURE__*/React__default.createElement(AltHeader, {
4606
+ level: 6
4607
+ }, message)));
4589
4608
  };
4590
4609
 
4591
4610
  var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
@@ -4662,7 +4681,7 @@ var Accordions = function Accordions(_ref) {
4662
4681
  }));
4663
4682
  };
4664
4683
 
4665
- var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$3, _templateObject9$2;
4684
+ var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$4, _templateObject9$3;
4666
4685
  var LENGTH_LARGE_TEXT = 28;
4667
4686
  var LENGTH_SMALL_TEXT = 19;
4668
4687
  var LENGTH_TEXT_TABLET = 10;
@@ -4679,8 +4698,8 @@ var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$c || (_templat
4679
4698
  var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
4680
4699
  var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
4681
4700
  var TextContainer = /*#__PURE__*/styled.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
4682
- var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$3 || (_templateObject8$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"])));
4683
- var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__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) {
4701
+ var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$4 || (_templateObject8$4 = /*#__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"])));
4702
+ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$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) {
4684
4703
  var size = _ref3.size,
4685
4704
  primaryButtonTextLength = _ref3.primaryButtonTextLength,
4686
4705
  tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
@@ -5010,9 +5029,9 @@ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObjec
5010
5029
  return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
5011
5030
  });
5012
5031
  var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$r || (_templateObject2$r = /*#__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);
5013
- var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__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.mobileAndTablet);
5032
+ var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
5014
5033
  var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
5015
- var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__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);
5034
+ var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__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-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
5016
5035
  var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__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);
5017
5036
  var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__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);
5018
5037