@twreporter/index-page 1.3.2 → 1.3.3-rc.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.3-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.3.3-rc.1...@twreporter/index-page@1.3.3-rc.2) (2022-09-05)
+
+
+### Bug Fixes
+
+* adjust index-page style & animation ([5760adb](https://github.com/twreporter/twreporter-npm-packages/commit/5760adb7e656dbfc52b993a0986bedac1072c903))
+
+
+
+
+
+## [1.3.3-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.3.3-rc.0...@twreporter/index-page@1.3.3-rc.1) (2022-08-22)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
+## [1.3.3-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.3.2...@twreporter/index-page@1.3.3-rc.0) (2022-08-17)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
 ## [1.3.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.3.2-rc.1...@twreporter/index-page@1.3.2) (2022-08-11)
 
 **Note:** Version bump only for package @twreporter/index-page

package/lib/components/category-section.js

@@ -41,9 +41,11 @@ var _color = _interopRequireDefault(require("../constants/color"));
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -74,7 +76,6 @@ var _ = {
 };
 var desktopMinWidth = _styleUtils.breakPoints.desktopMinWidth;
 var tabletMinWidth = _styleUtils.breakPoints.tabletMinWidth;
-var mobileWidth = _styleUtils.breakPoints.mobileMaxWidth;
 var backgroundColor = _color["default"].gray;
 var mockup = {
   mobile: {
@@ -103,17 +104,17 @@ var SectionWrapper = /*#__PURE__*/(0, _styledComponents["default"])(_section["de
 var FlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-section__FlexBox",
   componentId: "sc-1vfzdxm-2"
-})(["display:flex;flex-wrap:wrap;width:1002px;margin:0 auto;justify-content:center;", " ", " ", ""], _styleUtils.finalMedia.desktop(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 690px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 690px;\n  "]))), _styleUtils.finalMedia.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["display:flex;flex-wrap:wrap;width:1002px;margin:0 auto;justify-content:center;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 690px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 690px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-section__FlexItem",
   componentId: "sc-1vfzdxm-3"
-})(["background-color:white;position:relative;margin-bottom:70px;padding-bottom:20px;width:314px;&:nth-child(3n+2){margin-right:30px;margin-left:30px;}", " ", " ", ""], _styleUtils.finalMedia.desktop(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 210px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 210px;\n    &:nth-child(3n+2) {\n      margin-right: 20px;\n      margin-left: 20px;\n    }\n  "]))), _styleUtils.finalMedia.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    margin-bottom: 0;\n  "]))));
+})(["background-color:white;position:relative;margin-bottom:70px;padding-bottom:20px;width:314px;&:nth-child(3n+2){margin-right:30px;margin-left:30px;}", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 210px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 210px;\n    &:nth-child(3n+2) {\n      margin-right: 20px;\n      margin-left: 20px;\n    }\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    margin-bottom: 0;\n  "]))));
 
 var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-section__ImgFrame",
   componentId: "sc-1vfzdxm-4"
-})(["height:202px;", " ", " ", ""], _styleUtils.finalMedia.desktop(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    height: 138px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    height: 138px;\n  "]))), _styleUtils.finalMedia.mobile(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    height: 186px;\n  "]))));
+})(["height:202px;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    height: 138px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    height: 138px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    height: 186px;\n  "]))));
 
 var CategoryName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-section__CategoryName",
@@ -128,12 +129,12 @@ var TextFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-section__Title",
   componentId: "sc-1vfzdxm-7"
-})(["font-family:", ";font-weight:", ";font-size:20px;color:", ";line-height:1.4;width:92%;margin:0 auto;@media (max-width:", "){width:", "%;}"], _font.fontFamily.title, _font.fontWeight.bold, _color["default"].darkGray, mobileWidth, mockup.mobile.titleWidth / mockup.mobile.titleFrameWidth * 100);
+})(["font-family:", ";font-weight:", ";font-size:20px;color:", ";line-height:1.4;width:92%;margin:0 auto;", ""], _font.fontFamily.title, _font.fontWeight.bold, _color["default"].darkGray, _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), mockup.mobile.titleWidth / mockup.mobile.titleFrameWidth * 100));
 
 var More = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "category-section__More",
   componentId: "sc-1vfzdxm-8"
-})(["position:absolute;left:50%;bottom:-16px;padding-top:16px;transform:translateX(-50%);text-align:center;width:101%;background-color:", ";@media (max-width:", "){bottom:-24px;}"], backgroundColor, mobileWidth);
+})(["position:absolute;left:50%;bottom:-16px;padding-top:16px;transform:translateX(-50%);text-align:center;width:101%;background-color:", ";", ""], backgroundColor, _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    bottom: -24px;\n  "]))));
 
 var Category = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Category, _React$PureComponent);
@@ -174,15 +175,8 @@ var Category = /*#__PURE__*/function (_React$PureComponent) {
           path: _.get(item, 'moreURI')
         })));
       });
-      return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(SectionWrapper, {
-        mobileWidth: mobileWidth
-      }, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], {
-        mobileWidth: mobileWidth
-      }, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].category)), /*#__PURE__*/_react["default"].createElement(FlexBox, null, items), /*#__PURE__*/_react["default"].createElement(_mobileList["default"], {
-        maxWidth: mobileWidth
-      }, /*#__PURE__*/_react["default"].createElement(_mobileFlexSwipeable["default"].SwipableFlexItems, {
+      return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(SectionWrapper, null, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].category)), /*#__PURE__*/_react["default"].createElement(FlexBox, null, items), /*#__PURE__*/_react["default"].createElement(_mobileList["default"], null, /*#__PURE__*/_react["default"].createElement(_mobileFlexSwipeable["default"].SwipableFlexItems, {
         alignItems: "stretch",
-        mobileWidth: mobileWidth,
         maxSwipableItems: _.get(this.props, 'data.length', 1) - 1,
         categorySection: true
       }, items))));

package/lib/components/common-utils/mobile-list.js

@@ -7,14 +7,18 @@ exports["default"] = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 var MobileList = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-list__MobileList",
   componentId: "uh87t9-0"
-})(["display:none;@media (max-width:", "){display:block;}"], function (props) {
-  return props.maxWidth;
-});
+})(["display:none;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
 
 var _default = MobileList;
 exports["default"] = _default;

package/lib/components/common-utils/section-content-wrapper.js

@@ -9,6 +9,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styleUtils = require("../../utils/style-utils");
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -18,7 +20,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var ContentWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "section-content-wrapper__ContentWrapper",
   componentId: "shv972-0"
-})(["margin:0 auto;max-width:", ";", " ", " ", ""], _styleUtils.breakPoints.overDesktopMinWidth, _styleUtils.finalMedia.desktop(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: ", ";\n  "])), _styleUtils.breakPoints.desktopMinWidth), _styleUtils.finalMedia.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: ", ";\n  "])), _styleUtils.breakPoints.tabletMinWidth), _styleUtils.finalMedia.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    max-width: ", ";\n  "])), _styleUtils.breakPoints.mobileMaxWidth));
+})(["margin:0 auto;max-width:", ";", " ", " ", ""], _styleUtils.breakPoints.overDesktopMinWidth, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: ", ";\n  "])), _styleUtils.breakPoints.desktopMinWidth), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: ", ";\n  "])), _styleUtils.breakPoints.tabletMinWidth), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    max-width: ", ";\n  "])), _styleUtils.breakPoints.mobileMaxWidth));
 
 var _default = ContentWrapper;
 exports["default"] = _default;

package/lib/components/common-utils/section-name.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _styleUtils = require("../../utils/style-utils");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _color = _interopRequireDefault(require("../../constants/color"));
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,7 +20,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var SectionName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "section-name__SectionName",
   componentId: "ezov0u-0"
-})(["display:none;", ""], _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n    font-size: 12px;\n    position: absolute;\n    letter-spacing: 0.4px;\n    z-index: 3;\n    top: -8px;\n    left: 0;\n    right: 0;\n    text-align: center;\n    >span {\n      color: ", ";\n      padding-left: 5px;\n      padding-right: 5px;\n      background-color: ", ";\n    }\n  "])), _color["default"].white, _color["default"].red));
+})(["display:none;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n    font-size: 12px;\n    position: absolute;\n    letter-spacing: 0.4px;\n    z-index: 3;\n    top: -8px;\n    left: 0;\n    right: 0;\n    text-align: center;\n    >span {\n      color: ", ";\n      padding-left: 5px;\n      padding-right: 5px;\n      background-color: ", ";\n    }\n  "])), _color["default"].white, _color["default"].red));
 
 var _default = SectionName;
 exports["default"] = _default;

package/lib/components/common-utils/section.js

@@ -9,7 +9,7 @@ var _sectionContentWrapper = _interopRequireDefault(require("./section-content-w
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styleUtils = require("../../utils/style-utils");
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _templateObject;
 
@@ -20,6 +20,6 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var Section = /*#__PURE__*/(0, _styledComponents["default"])(_sectionContentWrapper["default"]).withConfig({
   displayName: "section__Section",
   componentId: "z0ptm1-0"
-})(["position:relative;padding-top:100px;padding-bottom:80px;", ""], _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: 30px;\n    padding-bottom: 60px;\n  "]))));
+})(["position:relative;padding-top:100px;padding-bottom:80px;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: 30px;\n    padding-bottom: 60px;\n  "]))));
 var _default = Section;
 exports["default"] = _default;

package/lib/components/donation-box-section.js

@@ -11,14 +11,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styleUtils = require("../utils/style-utils");
-
 var _color = _interopRequireDefault(require("../constants/color"));
 
 var _donationLink = _interopRequireDefault(require("@twreporter/react-components/lib/donation-link"));
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -74,22 +74,22 @@ var mobileContentWidthPct = mockup.contentWidth / mockup.defaultWidth * 100;
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box-section__Container",
   componentId: "sc-1xxgww4-0"
-})(["background-color:", ";padding-top:30px;padding-bottom:30px;", ""], _color["default"].brown, _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "]))));
+})(["background-color:", ";padding-top:30px;padding-bottom:30px;", ""], _color["default"].brown, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "]))));
 
 var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box-section__ContentContainer",
   componentId: "sc-1xxgww4-1"
-})(["display:flex;justify-content:space-between;align-items:center;max-width:1024px;margin:0 auto;padding:0 100px;color:", ";h3{margin:0;font-size:32px;font-weight:", ";font-family:", ";line-height:1.63;}p{margin-top:10px;font-size:14px;line-height:1.57;text-align:left;}", " ", " ", ""], _color["default"].white, _font.fontWeight.bold, _font.fontFamily.title, _styleUtils.finalMedia.overDesktop(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    padding: 0 219px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 110px;\n    p{\n      margin-top: 17px;\n    }\n  "]))), _styleUtils.finalMedia.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: ", "%;\n    display: block;\n    text-align: center;\n    padding: 0;\n    h3{\n      font-size: 24px;\n      line-height: 2.17;\n    }\n    p{\n      margin-top: 0;\n    }\n  "])), mobileContentWidthPct));
+})(["display:flex;justify-content:space-between;align-items:center;max-width:1024px;margin:0 auto;padding:0 100px;color:", ";h3{margin:0;font-size:32px;font-weight:", ";font-family:", ";line-height:1.63;}p{margin-top:10px;font-size:14px;line-height:1.57;text-align:left;}", " ", " ", ""], _color["default"].white, _font.fontWeight.bold, _font.fontFamily.title, _mediaQuery["default"].hdOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    padding: 0 219px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 110px;\n    p{\n      margin-top: 17px;\n    }\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: ", "%;\n    display: block;\n    text-align: center;\n    padding: 0;\n    h3{\n      font-size: 24px;\n      line-height: 2.17;\n    }\n    p{\n      margin-top: 0;\n    }\n  "])), mobileContentWidthPct));
 
 var DonateButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box-section__DonateButton",
   componentId: "sc-1xxgww4-2"
-})(["a{width:116px;height:40px;border-radius:20px;background:", ";border:none;color:", ";font-size:16px;cursor:pointer;display:table;", " ", " span{display:table-cell;vertical-align:middle;text-align:center;font-weight:", ";}}"], _color["default"].white, _color["default"].brown, _styleUtils.finalMedia.tablet(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 110px;\n      top: 9px;\n    "]))), _styleUtils.finalMedia.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin: 40px auto 0 auto;\n    "]))), _font.fontWeight.bold);
+})(["a{width:116px;height:40px;border-radius:20px;background:", ";border:none;color:", ";font-size:16px;cursor:pointer;display:table;", " ", " span{display:table-cell;vertical-align:middle;text-align:center;font-weight:", ";}}"], _color["default"].white, _color["default"].brown, _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 110px;\n      top: 9px;\n    "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin: 40px auto 0 auto;\n    "]))), _font.fontWeight.bold);
 
 var TextColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box-section__TextColumn",
   componentId: "sc-1xxgww4-3"
-})(["", ""], _styleUtils.finalMedia.desktop(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    max-width: 608px;\n  "]))));
+})(["", ""], _mediaQuery["default"].desktopOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    max-width: 608px;\n  "]))));
 
 var Icon = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box-section__Icon",

package/lib/components/editor-picks.js

@@ -33,11 +33,13 @@ var _color = _interopRequireDefault(require("../constants/color"));
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _clone = _interopRequireDefault(require("lodash/clone"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -128,29 +130,29 @@ var swapArrayElements = function swapArrayElements(arr, indexA, indexB) {
 var CarouselContainer = /*#__PURE__*/(0, _styledComponents["default"])(_sectionContentWrapper["default"]).withConfig({
   displayName: "editor-picks__CarouselContainer",
   componentId: "sc-1bdfw2o-0"
-})(["overflow-x:hidden;position:relative;@media (max-width:", "){display:none;}"], _styleUtils.breakPoints.mobileMaxWidth);
+})(["overflow-x:hidden;position:relative;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var FlexContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__FlexContainer",
   componentId: "sc-1bdfw2o-1"
-})(["position:relative;display:flex;height:932px;align-items:center;@media (max-width:", "){height:702px;}"], _styleUtils.breakPoints.desktopMaxWidth); // FlexItem is for moving Title
+})(["position:relative;display:flex;height:932px;align-items:center;", ""], _mediaQuery["default"].desktopAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 702px;\n  "])))); // FlexItem is for moving Title
 
 
 var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__FlexItem",
   componentId: "sc-1bdfw2o-2"
-})(["flex:0 0 20%;margin-right:20%;position:relative;transform:", ";transition:500ms transform ease-in,500ms margin-top ease-in;cursor:pointer;margin-top:", ";@media (max-width:", "){margin-top:", ";}z-index:2;"], function (props) {
+})(["flex:0 0 20%;margin-right:20%;position:relative;transform:", ";transition:500ms transform ease-in,500ms margin-top ease-in;cursor:pointer;margin-top:", ";", " z-index:2;"], function (props) {
   return props.selected !== 0 ? "translateX(-".concat((props.selected - 1) * 200, "%)") : 'translateX(200%)';
 }, function (props) {
   return props.middle ? '-770px' : '16px';
-}, _styleUtils.breakPoints.desktopMaxWidth, function (props) {
+}, _mediaQuery["default"].desktopAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: ", ";\n  "])), function (props) {
   return props.middle ? '-540px' : '16px';
-});
+}));
 
 var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__ImgFrame",
   componentId: "sc-1bdfw2o-3"
-})(["cursor:pointer;position:absolute;width:886px;height:570px;left:50%;top:236px;transform:translateX(-50%);", " ", ""], _styleUtils.finalMedia.desktop(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 610px;\n    height: 391px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 450px;\n    height: 295px;\n  "]))));
+})(["cursor:pointer;position:absolute;width:886px;height:570px;left:50%;top:236px;transform:translateX(-50%);", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 610px;\n    height: 391px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 450px;\n    height: 295px;\n  "]))));
 
 var Arrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__Arrow",
@@ -161,21 +163,21 @@ var Arrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var LeftArrow = /*#__PURE__*/(0, _styledComponents["default"])(Arrow).withConfig({
   displayName: "editor-picks__LeftArrow",
   componentId: "sc-1bdfw2o-5"
-})(["left:17%;display:", ";@media (max-width:", "){top:365px;}transition:0.2s display linear;"], function (props) {
+})(["left:17%;display:", ";", " transition:0.2s display linear;"], function (props) {
   return props.selected === 0 ? 'none' : 'inline';
-}, _styleUtils.breakPoints.desktopMaxWidth);
+}, _mediaQuery["default"].desktopAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    top: 365px;\n  "]))));
 var RightArrow = /*#__PURE__*/(0, _styledComponents["default"])(Arrow).withConfig({
   displayName: "editor-picks__RightArrow",
   componentId: "sc-1bdfw2o-6"
-})(["right:17%;display:", ";@media (max-width:", "){top:365px;}transition:0.2s display linear;"], function (props) {
+})(["right:17%;display:", ";", " transition:0.2s display linear;"], function (props) {
   return props.selected === props.dataLength - 1 ? 'none' : 'inline';
-}, _styleUtils.breakPoints.desktopMaxWidth);
+}, _mediaQuery["default"].desktopAndBelow(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    top: 365px;\n  "]))));
 var SideCategory = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
   displayName: "editor-picks__SideCategory",
   componentId: "sc-1bdfw2o-7"
-})(["text-align:center;height:16px;line-height:1.33;position:absolute;width:auto;transform:translateX(-50%);text-align:center;width:161px;height:16px;top:453px;left:", ";@media (max-width:", "){top:338px;}"], function (props) {
+})(["text-align:center;height:16px;line-height:1.33;position:absolute;width:auto;transform:translateX(-50%);text-align:center;width:161px;height:16px;top:453px;left:", ";", ""], function (props) {
   return props.left ? props.left : '0';
-}, _styleUtils.breakPoints.desktopMaxWidth);
+}, _mediaQuery["default"].desktopAndBelow(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    top: 338px;\n  "]))));
 var MiddleCategory = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
   displayName: "editor-picks__MiddleCategory",
   componentId: "sc-1bdfw2o-8"
@@ -196,34 +198,34 @@ var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.middle ? '1.25' : '1.25';
 }, function (props) {
   return props.middle ? '2.5' : '7.5';
-}, _styleUtils.finalMedia.desktop(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), function (props) {
+}, _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), function (props) {
   return props.middle ? '450px' : '120px';
-}), _styleUtils.finalMedia.tabletBelow(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), function (props) {
+}), _mediaQuery["default"].tabletAndBelow(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), function (props) {
   return props.middle ? '450px' : '90px';
 }));
 
 var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__Description",
   componentId: "sc-1bdfw2o-10"
-})(["position:absolute;font-size:16px;width:450px;top:", ";left:", ";color:", ";transform:translateX(-50%);", ";@media (min-width:", "){", " transition:.2s opacity linear;}z-index:2;"], function (props) {
+})(["position:absolute;font-size:16px;width:450px;top:", ";left:", ";color:", ";transform:translateX(-50%);", ";", " z-index:2;"], function (props) {
   return props.top ? props.top : '0';
 }, function (props) {
   return props.left ? props.left : '0';
-}, _color["default"].darkGray, (0, _styleUtils.truncate)('absolute', 1.43, 2, 'white'), _styleUtils.breakPoints.tabletMinWidth, function (props) {
+}, _color["default"].darkGray, (0, _styleUtils.truncate)('absolute', 1.43, 2, 'white'), _mediaQuery["default"].tabletAndAbove(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    ", "\n    transition: .2s opacity linear;\n  "])), function (props) {
   return props.ifHover ? 'opacity: 0.7;' : '';
-});
+}));
 
 var HoverEffect = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__HoverEffect",
   componentId: "sc-1bdfw2o-11"
-})(["cursor:pointer;text-decoration:none;color:", ";@media (min-width:", "){", " transition:.2s opacity linear;}"], _color["default"].darkGray, _styleUtils.breakPoints.tabletMinWidth, function (props) {
+})(["cursor:pointer;text-decoration:none;color:", ";", ""], _color["default"].darkGray, _mediaQuery["default"].tabletAndAbove(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    ", "\n    transition: .2s opacity linear;\n  "])), function (props) {
   return props.ifHover ? 'opacity: 0.7;' : 'opacity: 1;';
-});
+}));
 
 var FadeInFadeOut = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__FadeInFadeOut",
   componentId: "sc-1bdfw2o-12"
-})(["opacity:", ";z-index:", ";transition:0.5s opacity linear;"], function (props) {
+})(["opacity:", ";z-index:", ";transition:150ms opacity ease-in-out;"], function (props) {
   return props.isSelected ? '1' : '0';
 }, function (props) {
   return props.isSelected ? '1' : '0';
@@ -395,7 +397,7 @@ var EditorPicks = /*#__PURE__*/function (_React$Component) {
             var fadingStyle = {
               opacity: index === selectDataToShow[theProp.position] ? '1' : '0',
               zIndex: index === selectDataToShow[theProp.position] ? '1' : '0',
-              transition: 'opacity .5s linear'
+              transition: 'opacity 150ms ease-in-out'
             };
             return /*#__PURE__*/_react["default"].createElement(FadeInFadeOut, {
               key: _.get(post, 'id'),

package/lib/components/infographic-section.js

@@ -41,9 +41,11 @@ var _color = _interopRequireDefault(require("../constants/color"));
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -73,10 +75,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var _ = {
   get: _get["default"]
-}; // If window is less than oneColumnWidth,
-// there will be only one column. Default is three columns.
-
-var oneColumnWidth = _styleUtils.breakPoints.mobileMaxWidth;
+};
 var mockup = {
   img: {
     sizes: {
@@ -95,12 +94,12 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var UpperList = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infographic-section__UpperList",
   componentId: "sc-2fohll-1"
-})(["list-style-type:none;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;", ""], _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["list-style-type:none;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var LowerList = /*#__PURE__*/(0, _styledComponents["default"])(UpperList).withConfig({
   displayName: "infographic-section__LowerList",
   componentId: "sc-2fohll-2"
-})(["align-items:flex-end;margin-top:-282px;margin-bottom:59px;", " ", ""], _styleUtils.finalMedia.desktop(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-top: -170px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: -130px;\n    margin-bottom: 51px;\n  "]))));
+})(["align-items:flex-end;margin-top:-282px;margin-bottom:59px;", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-top: -170px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: -130px;\n    margin-bottom: 51px;\n  "]))));
 var MobileList = /*#__PURE__*/(0, _styledComponents["default"])(_mobileList["default"]).withConfig({
   displayName: "infographic-section__MobileList",
   componentId: "sc-2fohll-3"
@@ -109,28 +108,28 @@ var MobileList = /*#__PURE__*/(0, _styledComponents["default"])(_mobileList["def
 var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infographic-section__Item",
   componentId: "sc-2fohll-4"
-})(["max-width:430px;transition:300ms all linear;&:first-child{margin-right:30px;}&:last-child{margin-left:30px;}", " ", " ", " @media (min-width:", "){&:hover{opacity:0.7;}}"], _styleUtils.finalMedia.desktop(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: 290px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: 220px;\n    &:first-child {\n      margin-right: 20px;\n    }\n\n    &:last-child {\n      margin-left: 20px;\n    }\n  "]))), _styleUtils.finalMedia.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    max-width: 100%;\n    &:first-child {\n      margin-left: 0;\n    }\n    &:last-child {\n      margin-right: 0;\n    }\n  "]))), oneColumnWidth);
+})(["max-width:430px;transition:300ms all linear;&:first-child{margin-right:30px;}&:last-child{margin-left:30px;}", " ", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: 290px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: 220px;\n    &:first-child {\n      margin-right: 20px;\n    }\n\n    &:last-child {\n      margin-left: 20px;\n    }\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    max-width: 100%;\n    &:first-child {\n      margin-left: 0;\n    }\n    &:last-child {\n      margin-right: 0;\n    }\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    &:hover {\n      opacity: 0.7;\n    }\n  "]))));
 
 var WordBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infographic-section__WordBlock",
   componentId: "sc-2fohll-5"
-})(["background-color:", ";width:430px;min-height:115px;padding:8px 20px 15px 12px;", " ", " ", ""], _color["default"].white, _styleUtils.finalMedia.desktop(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 290px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    width: 220px;\n  "]))), _styleUtils.finalMedia.mobile(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n  "]))));
+})(["background-color:", ";width:430px;min-height:115px;padding:8px 20px 15px 12px;", " ", " ", ""], _color["default"].white, _mediaQuery["default"].desktopOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 290px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    width: 220px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n  "]))));
 
 var Title = /*#__PURE__*/_styledComponents["default"].h3.withConfig({
   displayName: "infographic-section__Title",
   componentId: "sc-2fohll-6"
-})(["margin:0;font-weight:", ";font-family:", ";font-size:20px;color:", ";@media (min-width:", "){", ";}", ""], _font.fontWeight.bold, _font.fontFamily.title, _color["default"].darkGray, _styleUtils.breakPoints.desktopMinWidth, (0, _styleUtils.truncate)('relative', 1.4, 2, _color["default"].white), _styleUtils.finalMedia.tablet(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-size: 16px;\n    ", ";\n  "])), (0, _styleUtils.truncate)('relative', 1.4, 3, _color["default"].white)));
+})(["margin:0;font-weight:", ";font-family:", ";font-size:20px;color:", ";", " ", ""], _font.fontWeight.bold, _font.fontFamily.title, _color["default"].darkGray, _mediaQuery["default"].desktopAndAbove(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    ", ";\n  "])), (0, _styleUtils.truncate)('relative', 1.4, 2, _color["default"].white)), _mediaQuery["default"].tabletOnly(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    font-size: 16px;\n    ", ";\n  "])), (0, _styleUtils.truncate)('relative', 1.4, 3, _color["default"].white)));
 
 var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infographic-section__ImgFrame",
   componentId: "sc-2fohll-7"
 })(["position:relative;width:430px;height:", ";", " ", " ", ""], function (props) {
   return props.isPortrait ? '596px' : '282px';
-}, _styleUtils.finalMedia.desktop(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    max-width: 290px;\n    height: ", ";\n  "])), function (props) {
+}, _mediaQuery["default"].desktopOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    max-width: 290px;\n    height: ", ";\n  "])), function (props) {
   return props.isPortrait ? '390px' : '190px';
-}), _styleUtils.finalMedia.tablet(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    width: 220px;\n    height: ", ";\n  "])), function (props) {
+}), _mediaQuery["default"].tabletOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    width: 220px;\n    height: ", ";\n  "])), function (props) {
   return props.isPortrait ? '290px' : '145px';
-}), _styleUtils.finalMedia.mobile(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 186px;\n  "]))));
+}), _mediaQuery["default"].mobileOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 186px;\n  "]))));
 
 var More = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infographic-section__More",
@@ -234,14 +233,7 @@ var InfographicSection = /*#__PURE__*/function (_React$PureComponent2) {
           isExternal: _.get(item, 'is_external', false)
         });
       });
-      return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_section["default"], {
-        mobileWidth: oneColumnWidth
-      }, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], {
-        mobileWidth: oneColumnWidth
-      }, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].infographic)), /*#__PURE__*/_react["default"].createElement(UpperList, null, postComps.slice(0, listNumber)), /*#__PURE__*/_react["default"].createElement(LowerList, null, postComps.slice(listNumber, listNumber * 2)), /*#__PURE__*/_react["default"].createElement(MobileList, {
-        maxWidth: oneColumnWidth
-      }, /*#__PURE__*/_react["default"].createElement(_mobileFlexSwipeable["default"].SwipableFlexItems, {
-        mobileWidth: oneColumnWidth,
+      return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_section["default"], null, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].infographic)), /*#__PURE__*/_react["default"].createElement(UpperList, null, postComps.slice(0, listNumber)), /*#__PURE__*/_react["default"].createElement(LowerList, null, postComps.slice(listNumber, listNumber * 2)), /*#__PURE__*/_react["default"].createElement(MobileList, null, /*#__PURE__*/_react["default"].createElement(_mobileFlexSwipeable["default"].SwipableFlexItems, {
         maxSwipableItems: 5,
         alignItems: "flex-start"
       }, postComps)), /*#__PURE__*/_react["default"].createElement(More, null, /*#__PURE__*/_react["default"].createElement(_bottomLink["default"], {

package/lib/components/junior-box-section.js

@@ -11,8 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styleUtils = require("../utils/style-utils");
-
 var _app = _interopRequireDefault(require("../constants/app"));
 
 var _color = _interopRequireDefault(require("../constants/color"));
@@ -21,6 +19,8 @@ var _juniorLink = _interopRequireDefault(require("@twreporter/react-components/l
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -85,22 +85,22 @@ var mobileContentWidthPct = mockup.contentWidth / mockup.defaultWidth * 100;
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "junior-box-section__Container",
   componentId: "sc-1yjyxv7-0"
-})(["background-image:url(", "/PodcastBox_Desktop.jpg);background-size:contain;padding-top:30px;padding-bottom:30px;", " ", " ", ""], _app["default"].assetsPath, _styleUtils.finalMedia.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-image: url(", "/PodcastBox_Mobile.jpg);\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "])), _app["default"].assetsPath), _styleUtils.finalMedia.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-image: url(", "/PodcastBox_Tablet.jpg);\n  "])), _app["default"].assetsPath), _styleUtils.finalMedia.overDesktop(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-image: url(", "/PodcastBox_DesktopHD.jpg);\n  "])), _app["default"].assetsPath));
+})(["background-image:url(", "/PodcastBox_Desktop.jpg);background-size:contain;padding-top:30px;padding-bottom:30px;", " ", " ", ""], _app["default"].assetsPath, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-image: url(", "/PodcastBox_Mobile.jpg);\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "])), _app["default"].assetsPath), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-image: url(", "/PodcastBox_Tablet.jpg);\n  "])), _app["default"].assetsPath), _mediaQuery["default"].hdOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-image: url(", "/PodcastBox_DesktopHD.jpg);\n  "])), _app["default"].assetsPath));
 
 var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "junior-box-section__ContentContainer",
   componentId: "sc-1yjyxv7-1"
-})(["display:flex;justify-content:space-between;align-items:center;max-width:1024px;margin:0 auto;padding:0 100px;color:", ";font-family:", ";h3{margin:0;font-size:32px;font-weight:", ";font-family:", ";line-height:1.63;}p{margin-top:10px;font-size:14px;line-height:1.57;text-align:left;}", " ", " ", ""], _color["default"].black, _font.fontFamily["default"], _font.fontWeight.bold, _font.fontFamily.title, _styleUtils.finalMedia.overDesktop(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    padding: 0 219px;\n  "]))), _styleUtils.finalMedia.tablet(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 110px;\n    p{\n      margin-top: 17px;\n    }\n  "]))), _styleUtils.finalMedia.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    max-width: ", "%;\n    display: block;\n    text-align: center;\n    padding: 0;\n    h3{\n      font-size: 24px;\n      line-height: 2.17;\n    }\n    p{\n      margin-top: 0;\n    }\n  "])), mobileContentWidthPct));
+})(["display:flex;justify-content:space-between;align-items:center;max-width:1024px;margin:0 auto;padding:0 100px;color:", ";font-family:", ";h3{margin:0;font-size:32px;font-weight:", ";font-family:", ";line-height:1.63;}p{margin-top:10px;font-size:14px;line-height:1.57;text-align:left;}", " ", " ", ""], _color["default"].black, _font.fontFamily["default"], _font.fontWeight.bold, _font.fontFamily.title, _mediaQuery["default"].hdOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    padding: 0 219px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 110px;\n    p{\n      margin-top: 17px;\n    }\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    max-width: ", "%;\n    display: block;\n    text-align: center;\n    padding: 0;\n    h3{\n      font-size: 24px;\n      line-height: 2.17;\n    }\n    p{\n      margin-top: 0;\n    }\n  "])), mobileContentWidthPct));
 
 var CTAButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "junior-box-section__CTAButton",
   componentId: "sc-1yjyxv7-2"
-})(["a{width:116px;height:40px;border-radius:20px;background:", ";border:none;color:", ";font-size:16px;cursor:pointer;display:table;", " ", " span{display:table-cell;vertical-align:middle;text-align:center;font-weight:", ";}}"], _color["default"].brown, _color["default"].white, _styleUtils.finalMedia.tablet(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 110px;\n      top: 9px;\n    "]))), _styleUtils.finalMedia.mobile(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin: 40px auto 0 auto;\n    "]))), _font.fontWeight.bold);
+})(["a{width:116px;height:40px;border-radius:20px;background:", ";border:none;color:", ";font-size:16px;cursor:pointer;display:table;", " ", " span{display:table-cell;vertical-align:middle;text-align:center;font-weight:", ";}}"], _color["default"].brown, _color["default"].white, _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 110px;\n      top: 9px;\n    "]))), _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin: 40px auto 0 auto;\n    "]))), _font.fontWeight.bold);
 
 var TextColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "junior-box-section__TextColumn",
   componentId: "sc-1yjyxv7-3"
-})(["", ""], _styleUtils.finalMedia.desktop(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    max-width: 608px;\n  "]))));
+})(["", ""], _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    max-width: 608px;\n  "]))));
 
 var Icon = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "junior-box-section__Icon",