diy-template-components 1.0.44 → 1.0.46

package/build/index.es.js

@@ -309,7 +309,7 @@ const colors = {
   // shades of grey
   darkGrey: '#333333',
   grey: '#666666',
-  lightGrey: '#999999',
+  lightGrey: '#9999',
   blueGrey: '#9497A5'
 };
 const alpha = {
@@ -1560,8 +1560,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     justifyContent: 'center',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: '140px 70px 80px 70px',
-    backgroundColor: theme?.palette?.background?.default,
+    padding: '64px 128px',
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -1601,7 +1600,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
   upperContainerItem3: {
     width: '33%',
     display: 'flex',
-    justifyContent: 'center',
+    justifyContent: 'end',
     flexWrap: 'wrap',
     paddingBottom: '52px'
   },
@@ -1616,8 +1615,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     display: 'flex',
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
-    padding: '0 0 32px 0',
-    margin: '0'
+    marginBottom: '16px'
   },
   addressImg: {
     marginRight: '8px',
@@ -1695,7 +1693,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
   },
   '@media screen and (max-width: 767px)': {
     section: {
-      padding: '45px 30px',
+      padding: '16px 24px',
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
@@ -1967,7 +1965,7 @@ const generateThemePalette = themeColors => ({
   font: {
     default: colors.darkGrey,
     invertedDefault: colors.white,
-    primary: colors.lightGrey,
+    primary: colors.darkGrey,
     secondary: colors.grey,
     tertiary: colors.blueGrey
   }
@@ -2298,7 +2296,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     position: 'relative',
     padding: ({
       isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     backgroundColor: theme?.palette?.background?.primary,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
@@ -2399,6 +2397,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     },
     contentContainer: {
       display: 'flex',
+      flexDirection: 'column-reverse',
       flexFlow: 'column',
       paddingBottom: '48px',
       gap: '24px'
@@ -2752,7 +2751,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     width: '100%',
     padding: ({
       isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     display: 'flex',
     justifyContent: 'center',
     flexDirection: 'column',
@@ -3156,6 +3155,8 @@ const Section$3 = ({
     isCustomWebsite,
     hasContent
   });
+  const mobileImageSrc = isMobile && nodeData?.mobileImage?.metadata?.value;
+  const desktopImageSrc = nodeData?.image?.metadata?.value;
   return /*#__PURE__*/React.createElement("section", {
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React.createElement("div", {
@@ -3196,7 +3197,7 @@ const Section$3 = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: hasContent && classes?.overlay
   }), /*#__PURE__*/React.createElement(NextImageRenderer, {
-    src: nodeData.image.metadata.value,
+    src: mobileImageSrc ? mobileImageSrc : desktopImageSrc,
     className: classes?.centerBgImage,
     sectionIndex: sectionIndex
   }))));
@@ -3235,7 +3236,7 @@ var index$j = /*#__PURE__*/Object.freeze({
 const useSectionStyles$5 = createUseStyles(theme => {
   return {
     section: {
-      padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      padding: `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -3256,7 +3257,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
     },
     centerData: {
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'start',
       justifyContent: 'center'
 
       // padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
@@ -3326,10 +3327,10 @@ const useSectionStyles$5 = createUseStyles(theme => {
     },
     '@media screen and (max-width: 767px)': {
       section: {
-        padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px`
+        padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px`
       },
       centerData: {
-        flexDirection: 'column-reverse',
+        flexDirection: 'column',
         width: '100%'
         // padding: `${theme?.spacing?.padding?.medium}px ${theme?.spacing?.padding?.regular}px`
       },
@@ -3471,7 +3472,7 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     justifyContent: 'center',
     padding: ({
       isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -3862,7 +3863,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
   testimonialContainer: {
     background: theme?.palette?.background?.primary,
     overflow: 'hidden',
-    padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    padding: `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -3975,7 +3976,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
   },
   '@media (max-width: 768px)': {
     testimonialContainer: {
-      padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px`
+      padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px`
     },
     // testimonialCardAndText: {
     //   margin: '0 20px'
@@ -4003,6 +4004,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
       marginRight: '16px'
     },
     reviewText: {
+      lineHeight: '22px',
       marginBottom: '16px'
     },
     singleCard: {
@@ -4013,7 +4015,8 @@ const useTestimonialStyles = createUseStyles(theme => ({
       // paddingTop: '8px',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      fontSize: '20px'
     },
     userImageContainer: {
       width: '48px',
@@ -4340,7 +4343,7 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       justifyContent: 'center',
       padding: ({
         isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily
         // boxSizing: 'border-box'
@@ -4367,9 +4370,10 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       letterSpacing: '3px',
       textTransform: 'uppercase',
       color: theme.palette.font.default,
-      wordBreak: 'break-word',
-      marginBottom: '8px'
+      wordBreak: 'break-word'
+      // marginBottom: '8px'
     },
+
     videoTestimonialTitle: {
       fontSize: theme.typography.fontSize.h2,
       // lineHeight: '71px',
@@ -4446,6 +4450,9 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       videoDetailsHeading: {
         lineHeight: 'normal'
       },
+      videoDetailsSubContent: {
+        textAlign: 'center'
+      },
       videoTestimonialTitle: {
         lineHeight: 'normal',
         letterSpacing: '-1px'
@@ -4552,7 +4559,7 @@ const useVideoStyles = createUseStyles(theme => {
     videoSuperContainer: {
       padding: ({
         isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
       backgroundColor: theme?.palette?.background?.primary,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
@@ -4595,11 +4602,11 @@ const useVideoStyles = createUseStyles(theme => {
     },
     singleSlideContainer: {
       backgroundColor: theme?.palette?.background?.default,
-      margin: '20px',
-      width: 'calc(100% - 40px)',
+      // margin: '20px',
+      width: 'calc(100% - 24px)',
       height: 'calc(100% - 40px)',
       borderRadius: theme?.shape?.borderRadius?.regular,
-      padding: '48px',
+      padding: '64px',
       boxShadow: theme?.shadows?.primary
     },
     contentRow: {
@@ -4635,7 +4642,7 @@ const useVideoStyles = createUseStyles(theme => {
       wordBreak: 'break-word'
     },
     videoDetailsSubHeading: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: theme.typography.fontSize.body,
       lineHeight: '24px',
       wordBreak: 'break-word',
       color: theme?.palette?.font?.primary
@@ -4675,17 +4682,16 @@ const useVideoStyles = createUseStyles(theme => {
         display: 'flex',
         justifyContent: 'center',
         textAlign: 'center'
+      },
+      videoDetailsHeading: {
+        fontSize: '20px',
+        marginBottom: '0',
+        textAlign: 'center'
+      },
+      videoDetailsSubHeading: {
+        fontSize: '14px',
+        textAlign: 'center'
       }
-
-      // videoDetailsHeading: {
-      //   fontSize: '18px',
-      //   margin: '0'
-      // },
-
-      // videoDetailsSubHeading: {
-      //   fontSize: '12px',
-      //   paddingBottom: '20px'
-      // }
     }
   };
 });
@@ -4789,7 +4795,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     position: 'relative',
     padding: ({
       isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px 0px ${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    } = {}) => isMobile ? `${theme.spacing.padding.regular}px 0px ${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
@@ -4831,7 +4837,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     wordBreak: 'break-word'
   },
   heading: {
-    margin: `8px 0 ${theme.spacing.margin.tiny}px`,
+    margin: `0px 0 ${theme.spacing.margin.tiny}px`,
     fontSize: theme.typography.fontSize.h2,
     width: '100%',
     lineHeight: '70px',
@@ -4839,10 +4845,11 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     textAlign: 'left',
     wordBreak: 'break-word'
   },
-  sliderContainer: {
-    marginLeft: '-10px',
-    marginRight: '-70px'
-  },
+  // sliderContainer: {
+  //   marginLeft: '-10px',
+  //   marginRight: '-70px'
+  // },
+
   card: {
     background: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.primary,
@@ -4857,9 +4864,12 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     padding: '24px',
     height: '100%',
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   cardHeading: {
+    textAlign: 'center',
     fontSize: theme.typography.fontSize.h6,
     fontWeight: theme.typography.fontWeight.bold,
     color: theme?.palette?.font?.default,
@@ -4867,6 +4877,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     wordBreak: 'break-word'
   },
   imageContainer: {
+    textAlign: 'center',
     width: '96px',
     height: '96px',
     display: 'flex',
@@ -4884,6 +4895,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     marginTop: theme.spacing.margin.tiny
   },
   cardPara: {
+    textAlign: 'center',
     fontSize: theme.typography.fontSize.body,
     lineHeight: '22px',
     color: theme?.palette?.font?.primary,
@@ -4899,11 +4911,15 @@ const useSectionStyles$3 = createUseStyles(theme => ({
   },
   '@media screen and (max-width: 767px)': {
     heading: {
-      fontSize: '24px',
-      margin: `4px 0 ${theme.spacing.margin.tiny}px`,
-      lineHeight: '36px',
+      textAlign: 'center',
+      fontSize: '20px',
+      margin: `0px 0 ${theme.spacing.margin.tiny}px`,
+      lineHeight: '24px',
       padding: '0'
     },
+    subTitleHeading: {
+      textAlign: 'center'
+    },
     sliderContainer: {
       marginLeft: '-6px',
       marginRight: '-20px'
@@ -4918,6 +4934,12 @@ const useSectionStyles$3 = createUseStyles(theme => ({
         slidesToShow,
         cardsCount
       } = {}) => cardsCount > slidesToShow ? `6px 2px 6px 6px` : `6px 0 6px 0`
+    },
+    cardHeading: {
+      fontSize: '18px'
+    },
+    cardContent: {
+      padding: '16px'
     }
   }
 }));
@@ -5018,7 +5040,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
   section: {
     padding: ({
       isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
@@ -5134,7 +5156,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       padding: ({
         isMobile,
         cardsCount
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : cardsCount === 1 ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.regular}px ${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px` : `${theme.spacing.padding.regular}px 0px ${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px` : cardsCount === 1 ? `${theme.spacing.padding.small}px ${theme.spacing.padding.small}px ${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px` : `${theme.spacing.padding.small}px 0px ${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -5186,17 +5208,22 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       } = {}) => {
         if (cardsCount === 1) return '';
         return `repeat(${slidesToShow},minmax(0, 1fr))`;
-      }
+      },
+      padding: ({
+        cardsCount
+      }) => cardsCount === 1 ? '0px 100px' : ''
     },
     carouselImage: {
-      height: '360px',
-      borderRadius: '22px',
+      height: ({
+        cardsCount
+      }) => cardsCount === 1 ? '480px' : '100%',
+      borderRadius: '24px',
       objectFit: 'cover',
+      objectPosition: 'center',
       position: 'absolute',
       left: 0,
       top: 0,
-      width: '100%',
-      height: '100%'
+      width: '100%'
     },
     title: {
       fontSize: theme.typography.fontSize.h2,
@@ -5312,7 +5339,7 @@ const useFaqListStyles = createUseStyles(theme => ({
     width: '100%',
     padding: ({
       isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     backgroundColor: theme?.palette?.background?.primary,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
@@ -5493,7 +5520,7 @@ const useTextGridStyles = createUseStyles(theme => ({
   section: {
     padding: ({
       isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     // backgroundColor: theme?.palette?.background?.primary,
 
     '&, & *, & *:before, & *:after': {
@@ -5669,7 +5696,7 @@ const useCourseStyles = createUseStyles(theme => {
       overflow: 'hidden',
       padding: ({
         isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -5819,7 +5846,6 @@ const useCourseStyles = createUseStyles(theme => {
     },
     courseCardStrikePrice: {
       fontSize: '14px',
-      fontWeight: '600',
       lineHeight: '13px',
       color: '#FE9B0E',
       '& span': {
@@ -5890,7 +5916,7 @@ const useCourseStyles = createUseStyles(theme => {
         // fontSize: '24px',
         lineHeight: '36px',
         color: theme?.palette?.font?.default,
-        margin: '4px 0 12px 0',
+        margin: '0px 0 12px 0',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
@@ -6193,7 +6219,7 @@ const useTeamStyles = createUseStyles(theme => {
     teamSuperContainer: {
       padding: ({
         isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
       // backgroundColor: theme?.palette?.background?.primary,
 
       '&, & *, & *:before, & *:after': {
@@ -6302,8 +6328,9 @@ const useTeamStyles = createUseStyles(theme => {
         textAlign: 'center'
       },
       teamTitle: {
+        marginTop: '0px',
         textAlign: 'center',
-        fontSize: theme.typography.fontSize.h3,
+        fontSize: theme.typography.fontSize.h2,
         lineHeight: '36px',
         letterSpacing: '-1px'
       },
@@ -6311,6 +6338,7 @@ const useTeamStyles = createUseStyles(theme => {
         margin: '0 -4px'
       },
       singleSlideContainer: {
+        padding: '24px',
         width: 'calc(100% - 8px)',
         margin: '12px 4px'
       },
@@ -6321,11 +6349,13 @@ const useTeamStyles = createUseStyles(theme => {
       },
 
       teamDetailsHeading: {
+        fontSize: '16px',
         lineHeight: '24px',
         margin: '0',
-        color: theme?.palette?.font?.default
+        color: theme?.palette?.font?.body
       },
       teamDetailsSubHeading: {
+        marginTop: '0px',
         color: theme?.palette?.font?.primary
       }
     }
@@ -6440,7 +6470,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     backgroundColor: theme?.palette?.background?.default,
     padding: ({
       isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -6520,7 +6550,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     padding: '4px 8px 0 0'
   },
   addressText: {
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: theme.typography.fontSize.h6,
     color: theme?.palette?.font?.default,
     lineHeight: '24px'
   },
@@ -6845,7 +6875,7 @@ const useSectionStyles = createUseStyles(theme => ({
     alignItems: 'center',
     padding: ({
       isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
@@ -8702,7 +8732,7 @@ const useTilesStyles = createUseStyles(theme => {
       flexDirection: 'column',
       padding: ({
         isMobile
-      } = {}) => isMobile ? `16px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`
+      } = {}) => isMobile ? `24px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`
     },
     tileDiv: {
       width: '236px',