src/app/common/components/marketing/styles/style-3.scss

@@ -82,6 +82,29 @@
  }
  }
 
+ ul.m-marketing__points {
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
+ > li em {
+ font-style: normal;
+
+ @include m-theme() {
+ color: themed($m-black);
+ }
+
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ font-weight: bold;
+ }
+ }
+ }
+
  .m-marketing__image {
  position: relative;
  z-index: 0;

src/app/common/components/marketing/styles/style-4.scss

@@ -56,6 +56,29 @@
  }
  }
 
+ ul.m-marketing__points {
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
+ > li em {
+ font-style: normal;
+
+ @include m-theme() {
+ color: themed($m-black);
+ }
+
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ font-weight: bold;
+ }
+ }
+ }
+
  .m-marketing__image {
  position: relative;
  z-index: 0;

src/app/common/components/marketing/styles/style-tail.scss

@@ -19,6 +19,7 @@
  }
 
  .m-marketing__body {
+ position: relative;
  text-align: center;
  padding: 0 36px;
 
@@ -54,5 +55,39 @@
  }
  }
  }
+
+ .m-marketingSectionTail__table {
+ > *::after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 1px;
+ height: 100%;
+ top: 0;
+ right: 0;
+ transform: translateX(($m-grid-gap / 2) + 1px);
+
+ @include m-theme() {
+ background: linear-gradient(
+ to bottom,
+ rgba(themed($m-grey-100), 0) 0%,
+ rgba(themed($m-grey-100), 0) 25%,
+ rgba(themed($m-grey-100), 0.9) 50%,
+ rgba(themed($m-grey-100), 0) 75%,
+ rgba(themed($m-grey-100), 0) 100%
+ );
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ content: initial;
+ display: initial;
+ }
+ }
+
+ > *:last-child::after {
+ content: initial;
+ display: initial;
+ }
+ }
  }
 }

src/app/modules/blockchain/marketing/rewards.component.html

@@ -195,7 +195,9 @@
  >
  <h2 i18n>Other Rewards</h2>
  </div>
+ </div>
 
+ <div class="m-grid m-marketing__wrapper m-marketingSectionTail__table">
  <div
  class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
  >
@@ -228,7 +230,9 @@
  perform an action, such as voting or commenting.
  </p>
  </div>
+ </div>
 
+ <div class="m-grid m-marketing__wrapper">
  <div
  class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >

src/app/modules/blockchain/marketing/token.component.html

@@ -153,7 +153,9 @@
  >
  <h2 i18n>Other features</h2>
  </div>
+ </div>
 
+ <div class="m-grid m-marketing__wrapper m-marketingSectionTail__table">
  <div
  class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
  >
@@ -186,7 +188,9 @@
  support Internet freedom.
  </p>
  </div>
+ </div>
 
+ <div class="m-grid m-marketing__wrapper">
  <div
  class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >

src/app/modules/nodes/marketing/marketing.component.html

@@ -145,7 +145,9 @@
  >
  <h2 i18n>Other Nodes features</h2>
  </div>
+ </div>
 
+ <div class="m-grid m-marketing__wrapper m-marketingSectionTail__table">
  <div
  class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
  >
@@ -179,7 +181,9 @@
  technology for the world.
  </p>
  </div>
+ </div>
 
+ <div class="m-grid m-marketing__wrapper">
  <div
  class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >

src/app/modules/plus/marketing.component.html

@@ -170,7 +170,9 @@
  >
  <h2 i18n>Other Plus features</h2>
  </div>
+ </div>
 
+ <div class="m-grid m-marketing__wrapper m-marketingSectionTail__table">
  <div
  class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
  >
@@ -192,7 +194,9 @@
  support for Internet freedom.
  </p>
  </div>
+ </div>
 
+ <div class="m-grid m-marketing__wrapper">
  <div
  class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >

src/app/modules/pro/marketing.component.html

@@ -214,7 +214,9 @@
  >
  <h2 i18n>Other Pro features</h2>
  </div>
+ </div>
 
+ <div class="m-grid m-marketing__wrapper m-marketingSectionTail__table">
  <div
  class="m-grid__column-4 m-grid__column-12--mobile m-marketing__body"
  >
@@ -245,7 +247,9 @@
  Get free promotion for your website and access millions of minds.
  </p>
  </div>
+ </div>
 
+ <div class="m-grid m-marketing__wrapper">
  <div
  class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
  >