@megafon/ui-shared 2.1.2 → 3.0.0-beta.0

package/dist/es/components/StoreBanner/StoreBanner.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -7,23 +54,23 @@ h5 {
 }
 .mfui-store-banner_theme_base .mfui-store-banner__grid,
 .mfui-store-banner_theme_clearWhite .mfui-store-banner__grid {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-store-banner_theme_base .mfui-store-banner__content,
 .mfui-store-banner_theme_clearWhite .mfui-store-banner__content {
-  color: #333333;
+  color: var(--content);
 }
 .mfui-store-banner_theme_green .mfui-store-banner__grid {
-  background-color: #00B956;
+  background-color: var(--green);
 }
 .mfui-store-banner_theme_green .mfui-store-banner__content {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-store-banner_theme_spbSky1 .mfui-store-banner__grid {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-store-banner_theme_spbSky1 .mfui-store-banner__content {
-  color: #333333;
+  color: var(--content);
 }
 .mfui-store-banner_mask_new-iphone .mfui-store-banner__device-mask {
   position: relative;
@@ -93,7 +140,7 @@ h5 {
 .mfui-store-banner__grid {
   padding-top: 32px;
   padding-bottom: 32px;
-  border: 1px solid #D8D8D8;
+  border: 1px solid var(--spbSky2);
   border-radius: 8px;
 }
 @media screen and (max-width: 767px) {

package/dist/es/components/Table/Table.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -18,17 +65,17 @@ h5 {
   height: 8px;
 }
 .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-track {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-thumb {
   border-radius: 4px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-corner {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-table:not(.mfui-table_touch) .mfui-table__scroll {
-  scrollbar-color: #D8D8D8 #EDEDED;
+  scrollbar-color: var(--spbSky2) var(--spbSky1);
   scrollbar-width: thin;
 }
 .mfui-table__scroll {
@@ -36,7 +83,7 @@ h5 {
   display: grid;
   grid-template-columns: auto auto auto;
   max-width: 100%;
-  border: 1px solid #D8D8D8;
+  border: 1px solid var(--spbSky2);
   overflow: auto;
 }
 @media screen and (min-width: 1024px) {
@@ -80,8 +127,8 @@ h5 {
   width: 100%;
   height: 48px;
   margin-top: -48px;
-  background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to top, #FFFFFF 25%, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to top, var(--base) 25%, rgba(255, 255, 255, 0));
 }
 .mfui-table__right-gradient {
   position: -webkit-sticky;
@@ -92,20 +139,20 @@ h5 {
   width: 48px;
   height: 100%;
   margin-left: -48px;
-  background: -webkit-gradient(linear, right top, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to left, #FFFFFF 25%, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, right top, left top, color-stop(25%, var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to left, var(--base) 25%, rgba(255, 255, 255, 0));
 }
 .mfui-table__table {
   border-width: 0;
   border-collapse: separate;
   border-spacing: 0;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-table__cell {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   padding: 24px;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 @media screen and (max-width: 767px) {
   .mfui-table__cell {
@@ -118,7 +165,7 @@ h5 {
   left: 0;
   width: 144px;
   min-width: 144px;
-  border-right: 1px solid #D8D8D8;
+  border-right: 1px solid var(--spbSky2);
 }
 .mfui-table__cell:not(:first-child) {
   max-width: 288px;
@@ -128,12 +175,12 @@ h5 {
   line-height: 16px;
   height: 72px;
   padding-bottom: 12px;
-  color: #33333380;
+  color: var(--stcBlack5);
   vertical-align: bottom;
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-table__row:not(:last-child) .mfui-table__cell {
-  border-bottom: 1px solid #D8D8D8;
+  border-bottom: 1px solid var(--spbSky2);
 }
 .mfui-table_min-cell-size_small .mfui-table__cell:not(:first-child) {
   min-width: 72px;

package/dist/es/components/TextBox/TextBox.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,

package/dist/es/components/TextBox/TextBoxPicture.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -20,5 +67,5 @@ h5 {
 .mfui-text-box-picture__img {
   display: block;
   max-width: 100%;
-  border: 1px solid #EDEDED;
+  border: 1px solid var(--spbSky1);
 }

package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -7,7 +54,7 @@ h5 {
 }
 .mfui-title-description-box {
   font-family: inherit;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-title-description-box__item_header {
   white-space: pre-wrap;
@@ -16,7 +63,7 @@ h5 {
   margin-bottom: 16px;
 }
 .mfui-title-description-box_text-color_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-title-description-box_h-align_center {
   text-align: center;

package/dist/es/components/VideoBanner/VideoBanner.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -119,19 +166,19 @@ h5 {
   }
 }
 .mfui-video-banner__content_text-color_black {
-  color: #333333;
+  color: var(--stcBlack);
 }
 .mfui-video-banner__content_text-color_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 @media screen and (max-width: 767px) {
   .mfui-video-banner__content_text-color-mobile_black {
-    color: #333333;
+    color: var(--stcBlack);
   }
 }
 @media screen and (max-width: 767px) {
   .mfui-video-banner__content_text-color-mobile_white {
-    color: #FFFFFF;
+    color: var(--stcWhite);
   }
 }
 .mfui-video-banner__description {

package/dist/es/components/VideoBlock/VideoBlock.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,

package/dist/lib/components/AccordionBox/AccordionBox.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,

package/dist/lib/components/BenefitsIcons/BenefitsIcons.js

@@ -193,7 +193,9 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
     };
   }, [iconPosition, inOneColumn, resizeHandler]);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn([className, classes.root]),
+    className: cn({
+      'one-column': inOneColumn
+    }, [className, classes.root]),
     ref: rootRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
@@ -210,7 +212,7 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
       className: classes.gridColumn,
       key: i
     }, columnConfig), /*#__PURE__*/React.createElement(_BenefitsIconsTile["default"], {
-      className: classes.item,
+      className: cn('tile', [classes.item]),
       title: title,
       text: text,
       icon: icon,

package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -12,3 +59,22 @@ h5 {
 .mfui-benefits-icons__inner {
   margin-bottom: -48px;
 }
+.mfui-benefits-icons__tile {
+  margin-bottom: 48px;
+}
+.mfui-benefits-icons_one-column .mfui-benefits-icons__inner {
+  margin-bottom: -24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-benefits-icons_one-column .mfui-benefits-icons__inner {
+    margin-bottom: -32px;
+  }
+}
+.mfui-benefits-icons_one-column .mfui-benefits-icons__tile {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-benefits-icons_one-column .mfui-benefits-icons__tile {
+    margin-bottom: 32px;
+  }
+}