gatsby-matrix-theme 53.2.43 → 53.2.45

package/src/components/organisms/cards/index.js

@@ -1,44 +1,78 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
-import ModuleIntroduction from './module-introduction';
 import SeeMore from '../../atoms/see-more';
-import OperatorsTable from '../../atoms/cards/operators-table';
-import ComparisonTable from '../../atoms/cards/comparison-table';
-import SrcollLayout from './template-two';
-import GridLayout from './template-one';
-import TemplateThree from './template-three';
+import ModuleIntroduction from './module-introduction';
 
 export default function index({ module, page, seeMoreButtonDown = false, modulePosition }) {
   // eslint-disable-next-line no-unused-expressions
-  module.style === 'template_three' ? seeMoreButtonDown = true : seeMoreButtonDown
+  module.style === 'template_three' ? (seeMoreButtonDown = true) : seeMoreButtonDown;
   const templateThree = module.style === 'template_three';
+  const ComparisonTableComponent = lazy(() => import('../../atoms/cards/comparison-table'));
+
+  const OperatorsTableComponent = lazy(() => import('../../atoms/cards/operators-table'));
+
+  const GridLayoutComponent = lazy(() => import('./template-one'));
+
+  const SrcollLayoutComponent = lazy(() => import('./template-two'));
+
+  const TemplateThreeComponent = lazy(() => import('./template-three'));
+
   const Component = () => {
     switch (module?.style) {
       case 'stack_table': {
         if (module.cards_page_type === 'operator') {
-          return <OperatorsTable module={module} page={page} modulePosition={modulePosition} />;
+          return (
+            <Suspense fallback={<></>}>
+              <OperatorsTableComponent
+                module={module}
+                page={page}
+                modulePosition={modulePosition}
+              />
+            </Suspense>
+          );
         }
         return null;
       }
       case 'comparison_table': {
         if (module.cards_page_type === 'operator') {
-          return <ComparisonTable module={module} page={page} modulePosition={modulePosition} />;
+          return (
+            <Suspense fallback={<></>}>
+              <ComparisonTableComponent
+                module={module}
+                page={page}
+                modulePosition={modulePosition}
+              />
+            </Suspense>
+          );
         }
         return null;
       }
       case 'template_two': {
         return (
-          <SrcollLayout module={module} page={page} modulePosition={modulePosition} />
+          <Suspense fallback={<></>}>
+            <SrcollLayoutComponent module={module} page={page} modulePosition={modulePosition} />
+          </Suspense>
         );
       }
       case 'template_three': {
         return (
-          <TemplateThree module={module} page={page} modulePosition={modulePosition} templateThree />
+          <Suspense fallback={<></>}>
+            <TemplateThreeComponent
+              module={module}
+              page={page}
+              modulePosition={modulePosition}
+              templateThree
+            />
+          </Suspense>
         );
       }
       default: {
-        return <GridLayout module={module} page={page} modulePosition={modulePosition} />;
+        return (
+          <Suspense fallback={<></>}>
+            <GridLayoutComponent module={module} page={page} modulePosition={modulePosition} />
+          </Suspense>
+        );
       }
     }
   };

package/src/gatsby-core-theme/components/molecules/header/index.js

@@ -7,14 +7,17 @@ import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import { getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
 import DefaulTemplateOne from 'gatsby-core-theme/src/components/molecules/header/variants/default/template-one';
 import DefaulTemplateTwo from '../../../../components/molecules/header/variants/default/template-two';
-import ReviewCredits from '../../../../components/atoms/review-credits';
-import Author from '~atoms/author';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import Verify from '~images/icons/verify';
 import styles from './header.module.scss';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+const AuthorComponent = lazy(() => import('~atoms/author'));
+
 export default function Header({ section, numOfStarsRating = 5, showAuthor }) {
   const { admin } = useContext(Context) || {};
+
+  const ReviewCreditsComponent = lazy(() => import('../../../../components/atoms/review-credits'));
+
   const customStyles = section.page.path === '/' ? 'homepage' : section.page.path.replace('/', '-');
   const getDefaultHeader = () => {
     let props = {
@@ -153,13 +156,13 @@ export default function Header({ section, numOfStarsRating = 5, showAuthor }) {
             ModuleComponent = lazy(() =>
               import('../../../../components/molecules/header/variants/slot/template-two')
             );
-            return <ModuleComponent page={pageSection.page} image={<Verify />} />;
+            return <ModuleComponent page={pageSection.page} image={<Suspense fallback={<></>}><VerifyIcon /></Suspense>} />;
           }
           default: {
             ModuleComponent = lazy(() =>
               import('../../../../components/molecules/header/variants/slot/template-one')
             );
-            return <ModuleComponent page={pageSection.page} image={<Verify />} />;
+            return <ModuleComponent page={pageSection.page} image={<Suspense><VerifyIcon /></Suspense>} />;
           }
         }
       }
@@ -302,7 +305,7 @@ export default function Header({ section, numOfStarsRating = 5, showAuthor }) {
 
       {useReviewCredits
         ? showReviewCredits && (
-            <ReviewCredits
+            <ReviewCreditsComponent
               date={date}
               authors={page?.allAuthors ? page?.allAuthors : page?.author_id && [page?.author]}
               readingTime={page.reading_time}
@@ -313,7 +316,7 @@ export default function Header({ section, numOfStarsRating = 5, showAuthor }) {
             />
           )
         : showAuthorComponent && (
-            <Author
+            <Suspense fallback={<></>}><AuthorComponent
               name={page.author?.name}
               date={date}
               type={page?.template}
@@ -323,7 +326,7 @@ export default function Header({ section, numOfStarsRating = 5, showAuthor }) {
               reviewer={page.reviewer_id && page?.reviewer}
               hasAuthorBox={hasAuthorBox}
               headerOffset={174}
-            />
+            /></Suspense>
           )}
     </header>
   );

package/storybook/public/127.5e3a1d21.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkgatsby_matrix_theme=self.webpackChunkgatsby_matrix_theme||[]).push([[127,693],{"./src/components/organisms/cards/template-three/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>index});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/react/index.js"),_template_two__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/organisms/cards/template-two/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}function index(props){return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_template_two__WEBPACK_IMPORTED_MODULE_1__.default,_extends({},props,{templateThree:!0}))}index.displayName="index",index.__docgenInfo={description:"",methods:[],displayName:"index"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/organisms/cards/template-three/index.js"]={name:"index",docgenInfo:index.__docgenInfo,path:"src/components/organisms/cards/template-three/index.js"})},"./src/components/organisms/cards/template-two/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>template_two});var react=__webpack_require__("../node_modules/react/index.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),scroll_x=__webpack_require__("../node_modules/gatsby-core-theme/src/hooks/scroll-x/index.js"),MainProvider=__webpack_require__("../node_modules/gatsby-core-theme/src/context/MainProvider.js"),card_button=__webpack_require__("./src/components/atoms/admin/card/button/index.js"),cards=__webpack_require__("./src/helpers/cards.js"),keygen=__webpack_require__("../node_modules/gatsby-core-theme/src/helpers/keygen.mjs"),CustomCardComponent=(0,react.memo)((function(_ref){var module=_ref.module,item=_ref.item,page=_ref.page,index=_ref.index,_ref$template=_ref.template,template=void 0===_ref$template?"template_five":_ref$template,modulePosition=_ref.modulePosition,itemPosition=_ref.itemPosition,Compo=(0,cards.X)(module.model_type||module.cards_page_type,template);return react.createElement(react.Suspense,{fallback:react.createElement(react.Fragment,null)},react.createElement(Compo,{key:(0,keygen.A)(),featured:"featured"===module.style,item,type:item.type,number:index+1,page,modulePosition,itemPosition}))}));CustomCardComponent.propTypes={page:prop_types_default().shape({}),module:prop_types_default().shape({items:prop_types_default().arrayOf(prop_types_default().shape({})),style:prop_types_default().string,model_type:prop_types_default().string,cards_page_type:prop_types_default().string}),item:prop_types_default().shape({type:prop_types_default().string}),index:prop_types_default().number,template:prop_types_default().string,modulePosition:prop_types_default().number,itemPosition:prop_types_default().number};const template_two_item=CustomCardComponent;var injectStylesIntoStyleTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),template_two_module=__webpack_require__("../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/organisms/cards/template-two/template-two.module.scss"),options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(template_two_module.A,options);const template_two_template_two_module=template_two_module.A.locals||{};var IoIosArrowBack=__webpack_require__("../node_modules/@react-icons/all-files/io/IoIosArrowBack.js"),IoIosArrowForward=__webpack_require__("../node_modules/@react-icons/all-files/io/IoIosArrowForward.js"),useTranslate=__webpack_require__("../node_modules/gatsby-core-theme/src/hooks/useTranslate/useTranslate.js"),buttons_module=__webpack_require__("../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/organisms/cards/template-two/buttons/buttons.module.scss"),buttons_module_options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(buttons_module.A,buttons_module_options);const buttons_buttons_module=buttons_module.A.locals||{};var Buttons=function(_ref){var scrollX=_ref.scrollX,noModuleIntro=_ref.noModuleIntro,scrollEnd=_ref.scrollEnd,scroll=_ref.scroll,templateThree=_ref.templateThree;return react.createElement(react.Fragment,null,react.createElement("button",{className:`${buttons_buttons_module.buttLeft} ${noModuleIntro?buttons_buttons_module.nointroButtLeft:""} ${scrollX<=0?buttons_buttons_module.disabled:""} ${templateThree?buttons_buttons_module.buttLeftTempThree:""}`,onClick:function(){return scroll(-200)},type:"button","aria-label":(0,useTranslate.A)("ariaLabel-carouselBtnLeft","carouselBtnLeft")},react.createElement(IoIosArrowBack.m,null)),react.createElement("button",{className:`${buttons_buttons_module.buttRight} ${noModuleIntro?buttons_buttons_module.nointroButtRight:""} ${scrollEnd?buttons_buttons_module.disabled:""} ${templateThree?buttons_buttons_module.buttRightTempThree:""}`,onClick:function(){return scroll(200)},type:"button","aria-label":(0,useTranslate.A)("ariaLabel-carouselBtnRight","carouselBtnRight")},react.createElement(IoIosArrowForward.O,null)))};Buttons.propTypes={scrollX:prop_types_default().number,noModuleIntro:prop_types_default().bool,scrollEnd:prop_types_default().bool,scroll:prop_types_default().func,templateThree:prop_types_default().bool},Buttons.__docgenInfo={description:"",methods:[],displayName:"Buttons",props:{scrollX:{description:"",type:{name:"number"},required:!1},noModuleIntro:{description:"",type:{name:"bool"},required:!1},scrollEnd:{description:"",type:{name:"bool"},required:!1},scroll:{description:"",type:{name:"func"},required:!1},templateThree:{description:"",type:{name:"bool"},required:!1}}};const buttons=Buttons;function _slicedToArray(r,e){return function _arrayWithHoles(r){if(Array.isArray(r))return r}(r)||function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(o)throw n}}return a}}(r,e)||function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}(r,e)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/organisms/cards/template-two/buttons/index.js"]={name:"Buttons",docgenInfo:Buttons.__docgenInfo,path:"src/components/organisms/cards/template-two/buttons/index.js"});var CustomCarousel=function(_ref){var page=_ref.page,module=_ref.module,noModuleIntro=_ref.noModuleIntro,modulePosition=_ref.modulePosition,templateThree=_ref.templateThree,container=(0,react.useRef)(null),_useState2=_slicedToArray((0,react.useState)(0),2),scrollX=_useState2[0],setScrollX=_useState2[1],_useState4=_slicedToArray((0,react.useState)(!1),2),scrollEnd=_useState4[0],setScrollEnd=_useState4[1],_useState6=_slicedToArray((0,react.useState)(!1),2),showButtons=_useState6[0],setShowButtons=_useState6[1],admin=((0,react.useContext)(MainProvider.o)||{}).admin,updateButtons=function(shift){setScrollEnd(Math.floor(container.current.scrollWidth-(container.current.scrollLeft+shift))<=container.current.offsetWidth)};return(0,react.useEffect)((function(){var timer=setTimeout((function(){setShowButtons(container.current.scrollWidth>container.current.offsetWidth)}),500);return function(){return clearTimeout(timer)}}),[]),react.createElement(scroll_x.A,{refTag:container,scroll:!0,stopScrolling:function(){return setScrollX(container.current.scrollLeft),void updateButtons(0)},onScroll:function(scrollLeft){updateButtons(0),setScrollX(scrollLeft)}},react.createElement("div",{ref:container},module.items&&module.items.map((function(item,index){return admin?react.createElement("div",{key:index,className:template_two_template_two_module.container},react.createElement(card_button.A,{item}),react.createElement(template_two_item,{key:index,index,item,page,module,modulePosition,itemPosition:index+1})):react.createElement(template_two_item,{key:index,index,item,page,module,modulePosition,itemPosition:index+1})})),showButtons&&react.createElement(buttons,{scroll:function(shift){container.current.scrollTo({left:container.current.scrollLeft+shift,behavior:"smooth"}),updateButtons(shift),setScrollX(scrollX+shift)},noModuleIntro,scrollX,scrollEnd,templateThree})))};CustomCarousel.displayName="CustomCarousel",CustomCarousel.propTypes={page:prop_types_default().shape({}),module:prop_types_default().shape({items:prop_types_default().arrayOf(prop_types_default().shape({})),style:prop_types_default().string}).isRequired,noModuleIntro:prop_types_default().bool,modulePosition:prop_types_default().number,templateThree:prop_types_default().bool},CustomCarousel.__docgenInfo={description:"",methods:[],displayName:"CustomCarousel",props:{page:{description:"",type:{name:"shape",value:{}},required:!1},module:{description:"",type:{name:"shape",value:{items:{name:"arrayOf",value:{name:"shape",value:{}},required:!1},style:{name:"string",required:!1}}},required:!0},noModuleIntro:{description:"",type:{name:"bool"},required:!1},modulePosition:{description:"",type:{name:"number"},required:!1},templateThree:{description:"",type:{name:"bool"},required:!1}}};const template_two=CustomCarousel;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/organisms/cards/template-two/index.js"]={name:"CustomCarousel",docgenInfo:CustomCarousel.__docgenInfo,path:"src/components/organisms/cards/template-two/index.js"})},"./src/helpers/cards.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{X:()=>getCard});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/react/index.js");function getCard(type){switch(type){case"operator":return(0,react__WEBPACK_IMPORTED_MODULE_0__.lazy)((function(){return Promise.resolve().then(__webpack_require__.bind(__webpack_require__,"./src/components/atoms/cards/operator-card/template-one/index.js"))}));case"game":return(0,react__WEBPACK_IMPORTED_MODULE_0__.lazy)((function(){return Promise.resolve().then(__webpack_require__.bind(__webpack_require__,"./src/components/atoms/cards/game-cards/template-one/index.js"))}));case"payment_method":return(0,react__WEBPACK_IMPORTED_MODULE_0__.lazy)((function(){return Promise.resolve().then(__webpack_require__.bind(__webpack_require__,"./src/components/atoms/cards/payment-method/template-one/index.js"))}));case"software_provider":return(0,react__WEBPACK_IMPORTED_MODULE_0__.lazy)((function(){return __webpack_require__.e(679).then(__webpack_require__.bind(__webpack_require__,"./src/components/atoms/cards/software-provider-card/index.js"))}));case"article":case"page":default:return(0,react__WEBPACK_IMPORTED_MODULE_0__.lazy)((function(){return Promise.resolve().then(__webpack_require__.bind(__webpack_require__,"./src/components/atoms/cards/article-card/template-one/index.js"))}));case"author":return(0,react__WEBPACK_IMPORTED_MODULE_0__.lazy)((function(){return Promise.resolve().then(__webpack_require__.bind(__webpack_require__,"./src/components/atoms/cards/author/template-one/index.js"))}))}}},"../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/organisms/cards/template-two/buttons/buttons.module.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".t9WQSmM3mUd6SeVyIIvv4w\\=\\=,.mxIeQkDDTmWq5ppQpOY\\+cw\\=\\={position:absolute;right:1rem;width:4rem;height:4rem;border-radius:100px;background:var(--background-card-slider-button, #262629);color:var(--card-color-slider-button, #fff);display:none}@media only screen and (min-width:768px){.t9WQSmM3mUd6SeVyIIvv4w\\=\\=,.mxIeQkDDTmWq5ppQpOY\\+cw\\=\\={display:flex;flex-direction:column;display:flex;align-items:center;justify-content:center;bottom:1.6rem;left:5.6rem}}@media only screen and (min-width:1200px){.t9WQSmM3mUd6SeVyIIvv4w\\=\\=,.mxIeQkDDTmWq5ppQpOY\\+cw\\=\\={left:9.6rem}}.mxIeQkDDTmWq5ppQpOY\\+cw\\=\\={left:12.4rem}@media only screen and (min-width:768px){.mxIeQkDDTmWq5ppQpOY\\+cw\\=\\={left:10rem}}@media only screen and (min-width:1200px){.mxIeQkDDTmWq5ppQpOY\\+cw\\=\\={left:14rem}}.USkiwhMhetE-\\+ZBcVGai\\+g\\=\\={background:var(--disabled-background-card-slider-button, #dedede);color:var(--disabled-color-card-slider-button, #262629)}.p\\+2k1Y1kjZBFTF9EG2T4ug\\=\\={left:1%;bottom:4rem}@media only screen and (min-width:1200px){.p\\+2k1Y1kjZBFTF9EG2T4ug\\=\\={left:15%}}.QcGQHZFB\\+FiNwtZLxPevlg\\=\\={left:calc(1% + 4.5rem);bottom:4rem}@media only screen and (min-width:1200px){.QcGQHZFB\\+FiNwtZLxPevlg\\=\\={left:calc(15% + 4.5rem)}}.NA0My7vDm\\+O0PSochoshCg\\=\\=,.\\+W4Rzsutpy0yl\\+U1ZH\\+FMg\\=\\={bottom:auto}@media only screen and (min-width:768px)and (max-width:991px){.NA0My7vDm\\+O0PSochoshCg\\=\\=,.\\+W4Rzsutpy0yl\\+U1ZH\\+FMg\\=\\={top:4.8rem}}@media only screen and (min-width:992px){.NA0My7vDm\\+O0PSochoshCg\\=\\=,.\\+W4Rzsutpy0yl\\+U1ZH\\+FMg\\=\\={top:6.4rem}}.NA0My7vDm\\+O0PSochoshCg\\=\\={left:auto;right:8rem}@media only screen and (min-width:768px)and (max-width:991px){.NA0My7vDm\\+O0PSochoshCg\\=\\={right:4.3rem}}.\\+W4Rzsutpy0yl\\+U1ZH\\+FMg\\=\\={left:auto;right:12.8rem}@media only screen and (min-width:768px)and (max-width:991px){.\\+W4Rzsutpy0yl\\+U1ZH\\+FMg\\=\\={right:9.1rem}}","",{version:3,sources:["webpack://./src/components/organisms/cards/template-two/buttons/buttons.module.scss","webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_media-queries.scss","webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_mixins.scss"],names:[],mappings:"AAcA,yDAEE,iBAAA,CACA,UAAA,CACA,UAAA,CACA,WAAA,CACA,mBAAA,CACA,wDAAA,CACA,2CAAA,CACA,YAAA,CC6BA,yCDtCF,yDEPE,YAAA,CACA,qBFkB0B,CEzB1B,YAAA,CACA,kBFyBsB,CExBtB,sBFwB8B,CAE5B,aAAA,CACA,WAAA,CAAA,CCsBF,0CDtCF,yDAoBI,WAAA,CAAA,CAIJ,6BACE,YAAA,CCaA,yCDdF,6BAII,UAAA,CAAA,CCUF,0CDdF,6BAQI,UAAA,CAAA,CAIJ,8BACE,iEAAA,CACA,uDAAA,CAGF,6BACE,OAAA,CACA,WAAA,CCLA,0CDGF,6BAKI,QAAA,CAAA,CAIJ,6BACE,sBAAA,CACA,WAAA,CCdA,0CDYF,6BAKI,uBAAA,CAAA,CAIJ,4DAEE,WAAA,CCTA,8DDOF,4DAKI,UAAA,CAAA,CC1BF,yCDqBF,4DASI,UAAA,CAAA,CAIJ,6BACE,SAAA,CACA,UAAA,CCtBA,8DDoBF,6BAKI,YAAA,CAAA,CAIJ,+BACE,SAAA,CACA,aAAA,CC/BA,8DD6BF,+BAKI,YAAA,CAAA",sourcesContent:['/* stylelint-disable no-invalid-position-at-import-rule */\n@use \'sass:map\';\n\n// NOTE: General Styles\n@import "../../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/stack-order";\n@import "../../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/typography";\n@import "../../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/layout";\n@import "../../../../../../../node_modules/gatsby-core-theme/src/styles/utils/media-queries";\n@import "../../../../../../../node_modules/gatsby-core-theme/src/styles/utils/icons";\n@import "../../../../../../../node_modules/gatsby-core-theme/src/styles/utils/tooltip";\n@import "../../../../../../../node_modules/gatsby-core-theme/src/styles/utils/loader";\n@import "../../../../../../../node_modules/gatsby-core-theme/src/styles/utils/mixins";\n@import "../../../../../../../node_modules/gatsby-core-theme/src/styles/utils/scrollbar";\n@import "../../../../../../../node_modules/gatsby-core-theme/src/styles/utils/animations";\n.buttLeft,\n.buttRight {\n  position: absolute;\n  right: 1rem;\n  width: 4rem;\n  height: 4rem;\n  border-radius: 100px;\n  background: var(--background-card-slider-button, #262629);\n  color: var(--card-color-slider-button, #fff);\n  display: none;\n\n  @include min(tablet) {\n    @include flex-direction(column);\n    @include flex-align(center, center);\n\n    bottom: 1.6rem;\n    left: 5.6rem;\n  }\n\n  @include min(desktop) {\n    left: 9.6rem;\n  }\n}\n\n.buttRight {\n  left: 12.4rem;\n\n  @include min(tablet) {\n    left: 10rem;\n  }\n\n  @include min(desktop) {\n    left: 14rem;\n  }\n}\n\n.disabled {\n  background: var(--disabled-background-card-slider-button, #dedede);\n  color: var(--disabled-color-card-slider-button, #262629);\n}\n\n.nointroButtLeft {\n  left: 1%;\n  bottom: 4rem;\n\n  @include min(desktop) {\n    left: 15%;\n  }\n}\n\n.nointroButtRight {\n  left: calc(1% + 4.5rem);\n  bottom: 4rem;\n\n  @include min(desktop) {\n    left: calc(15% + 4.5rem);\n  }\n}\n\n.buttRightTempThree,\n.buttLeftTempThree {\n  bottom: auto;\n\n  @include min-max(tablet, tablet) {\n    top: 4.8rem;\n  }\n\n  @include min(laptop) {\n    top: 6.4rem;\n  }\n}\n\n.buttRightTempThree {\n  left: auto;\n  right: 8rem;\n\n  @include min-max(tablet, tablet) {\n    right: 4.3rem;\n  }\n}\n\n.buttLeftTempThree {\n  left: auto;\n  right: 12.8rem;\n\n  @include min-max(tablet, tablet) {\n    right: 9.1rem;\n  }\n}\n',"$media-query-sizes: (\n  mobile-s: (\n    min: 320px,\n    max: 374px,\n  ),\n  mobile-m: (\n    min: 375px,\n    max: 424px,\n  ),\n  mobile: (\n    min: 425px,\n    max: 767px,\n  ),\n  tablet: (\n    min: 768px,\n    max: 991px,\n  ),\n  laptop: (\n    min: 992px,\n    max: 1199px,\n  ),\n  desktop: (\n    min: 1200px,\n  ),\n);\n\n// Get media query sizes\n$screen: 'only screen';\n@function media-query($media, $optional-media: '', $min: true) {\n  $media-label: '';\n\n  @if ($optional-media != '') {\n    $media-sizes-min: map-get($media-query-sizes, $media);\n    $media-sizes-max: map-get($media-query-sizes, $optional-media);\n    $media-label: $screen +\n      \" and (min-width:#{map-get($media-sizes-min, 'min')}) and (max-width:#{map-get($media-sizes-max, 'max')})\";\n  } @else {\n    $query: 'max';\n\n    @if ($min) {\n      $query: 'min';\n    }\n\n    $media-sizes: map-get($media-query-sizes, $media);\n    $media-label: $screen + ' and (#{$query}-width:#{map-get($media-sizes, $query)})';\n  }\n\n  @return $media-label;\n}\n\n// Min media query\n@mixin min($media) {\n  @media #{media-query($media)} {\n    @content;\n  }\n}\n\n// Max media query\n@mixin max($media) {\n  @media #{media-query($media, '', false)} {\n    @content;\n  }\n}\n\n// Min & max media query\n@mixin min-max($min, $max) {\n  @media #{media-query($min, $max)} {\n    @content;\n  }\n}\n\n// Use this ONLY if you need a media query that doesn't fit the $media-query-sizes breakpoints above\n// Pass number, for example @include custom-min(992)\n@mixin custom-min($min) {\n  @media #{$screen} and (min-width: #{$min}px) {\n    @content;\n  }\n}\n\n@mixin custom-max($max) {\n  @media #{$screen} and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n@mixin custom-min-max($min, $max) {\n  @media #{$screen} and (min-width: #{$min}px) and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n// Landscape\n// (If we find more use cases of this in the future, might want to refactor this and include it in the media-query function for $screen)\n// Pass number\n$landscape: 'screen and (orientation:landscape)';\n\n@mixin landscape-max($max) {\n  @media #{$landscape} and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n@mixin landscape-min($min) {\n  @media #{$landscape} and (min-width: #{$min}px) {\n    @content;\n  }\n}\n","@mixin flex-align($align-items, $justify-content) {\n  display: flex;\n  align-items: $align-items;\n  justify-content: $justify-content;\n}\n\n@mixin flex-direction($flex-direction) {\n  display: flex;\n  flex-direction: $flex-direction;\n}\n\n@mixin overflow($overflow-type, $overflow-value, $scrolling) {\n  #{$overflow-type}: $overflow-value;\n  -webkit-overflow-scrolling: $scrolling; // Autoprefixer doesn't add\n}\n\n@mixin text-background($bgcolor, $text-color) {\n  background: $bgcolor;\n  border-radius: 100px;\n  color: $text-color;\n  font-weight: 700;\n  @include flex-align(center, center);\n  padding: 0 2rem;\n}\n\n@mixin link-color($color) {\n  color: $color;\n\n  &:hover {\n    color: $color;\n  }\n}\n\n// Using em because I want images in content to inherit size based on parent element (not root)\n@mixin content-img-float($direction) {\n  float: $direction;\n  @if $direction == right {\n    margin: var(--img-float-direction-right, 0 0 2.4rem 4.8rem);\n  } @else if $direction == left {\n    margin: var(--img-float-direction-left, 0 4.8rem 2.4rem 0);\n  } @else {\n    margin: 0 1em 1em 0;\n  }\n}\n\n@mixin content-img-align($direction: center, $spacing: var(--content-img-spacing, 1em)) {\n  display: block;\n  @if $direction == right {\n    margin: $spacing 0 $spacing auto;\n  } @else if $direction == left {\n    margin: $spacing auto $spacing 0;\n  } @else {\n    margin: $spacing auto;\n  }\n}\n\n@mixin section-arrow-down($color, $width, $height) {\n  position: relative;\n  &:after {\n    top: 100%;\n    left: 50%;\n    border: solid transparent;\n    content: '';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-color: rgba(0, 0, 0, 0);\n    border-top: $height solid $color;\n    border-right: calc($width / 2) solid transparent;\n    border-left: calc($width / 2) solid transparent;\n    margin-left: - calc($width / 2);\n  }\n}\n\n@mixin gradientBtn($color1, $color2, $color3) {\n  background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n  &:hover {\n    background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n  }\n}\n\n@mixin sportBtn($color1, $color2) {\n  background: linear-gradient(to bottom, $color1 0, $color2 100%);\n  &:hover {\n    background: linear-gradient(to bottom, $color2 0, $color1 100%);\n  }\n}\n\n@mixin star($border-color: #ffb400, $fill-color: #ffb400, $width: 16px, $line-height: 2rem) {\n  line-height: $line-height;\n  width: $width;\n  font-weight: normal;\n  display: inline-block;\n  color: $fill-color;\n  font-size: 15px;\n  position: relative;\n  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n\n  &:last-child {\n    margin-right: 0;\n  }\n  &:before {\n    content: '\\2605';\n  }\n}\n\n@mixin half-star($border-color: #ffb400, $half-empty-color: #ffb400, $half-full-color: white) {\n  line-height: 2rem;\n  width: 16px;\n  font-weight: normal;\n  display: inline-block;\n  color: $half-full-color;\n  font-size: 15px;\n  position: relative;\n  &:before {\n    content: '\\2605';\n  }\n  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n  &:after {\n    content: '\\2605';\n    color: $half-empty-color;\n    position: absolute;\n    width: 7px;\n    overflow: hidden;\n    bottom: 0;\n    left: 0;\n  }\n}\n\n@mixin border-gradient($color-1, $color-2, $bgcolor, $radius: 0.8rem, $border-width: 2px) {\n  background: $bgcolor;\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: $radius;\n    border: $border-width solid transparent;\n    background: $color-1, $color-2 border-box;\n    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: destination-out;\n    mask-composite: exclude;\n  }\n}\n\n@mixin border-gradient-single($color-1, $bgcolor, $radius: 0.8rem, $border-width: 0.1rem) {\n  background: $bgcolor;\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: $radius;\n    border: $border-width solid transparent;\n    background: $color-1 border-box;\n    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: destination-out;\n    mask-composite: exclude;\n  }\n}\n\n@mixin buttonsColor($color1, $color2, $color3, $textColor: 'white') {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background-color: $color1;\n  color: $textColor;\n  padding: 0.9rem 3rem;\n  font-weight: 700;\n  font-size: 1.8rem;\n  border-radius: var(--border-radius);\n\n  > svg {\n    flex: none;\n    margin-left: 0.8rem;\n  }\n\n  &:hover {\n    background-color: $color2;\n    color: $textColor;\n  }\n\n  &:active {\n    background-color: $color3;\n    color: $textColor;\n  }\n}\n"],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={buttLeft:"t9WQSmM3mUd6SeVyIIvv4w==",buttRight:"mxIeQkDDTmWq5ppQpOY+cw==",disabled:"USkiwhMhetE-+ZBcVGai+g==",nointroButtLeft:"p+2k1Y1kjZBFTF9EG2T4ug==",nointroButtRight:"QcGQHZFB+FiNwtZLxPevlg==",buttRightTempThree:"NA0My7vDm+O0PSochoshCg==",buttLeftTempThree:"+W4Rzsutpy0yl+U1ZH+FMg=="};const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/organisms/cards/template-two/template-two.module.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".hpu9HRNqO9E\\+AfruCgwLxA\\=\\={position:relative}","",{version:3,sources:["webpack://./src/components/organisms/cards/template-two/template-two.module.scss"],names:[],mappings:"AAeA,6BACE,iBAAA",sourcesContent:['/* stylelint-disable no-invalid-position-at-import-rule */\n@use \'sass:map\';\n\n// NOTE: General Styles\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/stack-order";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/typography";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/layout";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/media-queries";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/icons";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/tooltip";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/loader";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/mixins";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/scrollbar";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/animations";\n\n.container {\n  position: relative;\n}'],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={container:"hpu9HRNqO9E+AfruCgwLxA=="};const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___}}]);