diy-template-components 1.0.44 → 1.0.46

package/build/index.js

@@ -325,7 +325,7 @@ const colors = {
   // shades of grey
   darkGrey: '#333333',
   grey: '#666666',
-  lightGrey: '#999999',
+  lightGrey: '#9999',
   blueGrey: '#9497A5'
 };
 const alpha = {
@@ -1576,8 +1576,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'
@@ -1617,7 +1616,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
   upperContainerItem3: {
     width: '33%',
     display: 'flex',
-    justifyContent: 'center',
+    justifyContent: 'end',
     flexWrap: 'wrap',
     paddingBottom: '52px'
   },
@@ -1632,8 +1631,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',
@@ -1711,7 +1709,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',
@@ -1983,7 +1981,7 @@ const generateThemePalette = themeColors => ({
   font: {
     default: colors.darkGrey,
     invertedDefault: colors.white,
-    primary: colors.lightGrey,
+    primary: colors.darkGrey,
     secondary: colors.grey,
     tertiary: colors.blueGrey
   }
@@ -2314,7 +2312,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,
@@ -2415,6 +2413,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     },
     contentContainer: {
       display: 'flex',
+      flexDirection: 'column-reverse',
       flexFlow: 'column',
       paddingBottom: '48px',
       gap: '24px'
@@ -2768,7 +2767,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',
@@ -3172,6 +3171,8 @@ const Section$3 = ({
     isCustomWebsite,
     hasContent
   });
+  const mobileImageSrc = isMobile && nodeData?.mobileImage?.metadata?.value;
+  const desktopImageSrc = nodeData?.image?.metadata?.value;
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3212,7 +3213,7 @@ const Section$3 = ({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: hasContent && classes?.overlay
   }), /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
-    src: nodeData.image.metadata.value,
+    src: mobileImageSrc ? mobileImageSrc : desktopImageSrc,
     className: classes?.centerBgImage,
     sectionIndex: sectionIndex
   }))));
@@ -3251,7 +3252,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'
@@ -3272,7 +3273,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`
@@ -3342,10 +3343,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`
       },
@@ -3487,7 +3488,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'
@@ -3878,7 +3879,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'
@@ -3991,7 +3992,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'
@@ -4019,6 +4020,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
       marginRight: '16px'
     },
     reviewText: {
+      lineHeight: '22px',
       marginBottom: '16px'
     },
     singleCard: {
@@ -4029,7 +4031,8 @@ const useTestimonialStyles = createUseStyles(theme => ({
       // paddingTop: '8px',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      fontSize: '20px'
     },
     userImageContainer: {
       width: '48px',
@@ -4356,7 +4359,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'
@@ -4383,9 +4386,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',
@@ -4462,6 +4466,9 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       videoDetailsHeading: {
         lineHeight: 'normal'
       },
+      videoDetailsSubContent: {
+        textAlign: 'center'
+      },
       videoTestimonialTitle: {
         lineHeight: 'normal',
         letterSpacing: '-1px'
@@ -4568,7 +4575,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,
@@ -4611,11 +4618,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: {
@@ -4651,7 +4658,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
@@ -4691,17 +4698,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'
-      // }
     }
   };
 });
@@ -4805,7 +4811,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,
@@ -4847,7 +4853,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',
@@ -4855,10 +4861,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,
@@ -4873,9 +4880,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,
@@ -4883,6 +4893,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     wordBreak: 'break-word'
   },
   imageContainer: {
+    textAlign: 'center',
     width: '96px',
     height: '96px',
     display: 'flex',
@@ -4900,6 +4911,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,
@@ -4915,11 +4927,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'
@@ -4934,6 +4950,12 @@ const useSectionStyles$3 = createUseStyles(theme => ({
         slidesToShow,
         cardsCount
       } = {}) => cardsCount > slidesToShow ? `6px 2px 6px 6px` : `6px 0 6px 0`
+    },
+    cardHeading: {
+      fontSize: '18px'
+    },
+    cardContent: {
+      padding: '16px'
     }
   }
 }));
@@ -5034,7 +5056,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,
@@ -5150,7 +5172,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'
@@ -5202,17 +5224,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,
@@ -5328,7 +5355,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,
@@ -5509,7 +5536,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': {
@@ -5685,7 +5712,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'
@@ -5835,7 +5862,6 @@ const useCourseStyles = createUseStyles(theme => {
     },
     courseCardStrikePrice: {
       fontSize: '14px',
-      fontWeight: '600',
       lineHeight: '13px',
       color: '#FE9B0E',
       '& span': {
@@ -5906,7 +5932,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'
@@ -6209,7 +6235,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': {
@@ -6318,8 +6344,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'
       },
@@ -6327,6 +6354,7 @@ const useTeamStyles = createUseStyles(theme => {
         margin: '0 -4px'
       },
       singleSlideContainer: {
+        padding: '24px',
         width: 'calc(100% - 8px)',
         margin: '12px 4px'
       },
@@ -6337,11 +6365,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
       }
     }
@@ -6456,7 +6486,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'
@@ -6536,7 +6566,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'
   },
@@ -6861,7 +6891,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,
@@ -8718,7 +8748,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',