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

@@ -127,14 +127,17 @@
  padding: 72px 0 32px;
 
  @media screen and (max-width: $m-grid-min-vp) {
- //padding: 30px 0;
- //margin: 0 20px;
+ padding: 0;
  }
  }
 
  .m-marketing__body {
  position: relative;
 
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0 30px 30px;
+ }
+
  &::before {
  content: '';
  position: absolute;
@@ -150,6 +153,29 @@
  #f5f5fe 99.99%
  ); // TODO: Theme
  z-index: -1;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ right: 0;
+ bottom: -3vw;
+ transform: none;
+ clip-path: none;
+ }
+ }
+
+ h1 {
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin: 15px 0 15px;
+ text-align: center;
+ }
+ }
+
+ h2 {
+ @media screen and (max-width: $m-grid-min-vp) {
+ font-size: 28px;
+ line-height: 32px;
+ margin: 0 0 17px;
+ text-align: center;
+ }
  }
  }
 
@@ -163,6 +189,10 @@
 
  @media screen and (max-width: $m-grid-min-vp) {
  padding-right: 0;
+ margin-bottom: 30px;
+ font-size: 16px;
+ line-height: 23px;
+ text-align: center;
  }
  }
 
@@ -173,6 +203,13 @@
  img {
  object-fit: contain;
  clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ width: 100vw;
+ height: 100vw;
+ object-fit: cover;
+ clip-path: polygon(0% 2%, 0% 97%, 100% 100%, 100% 0%);
+ }
  }
 
  span {
@@ -193,6 +230,11 @@
  background: url('<%= APP_CDN %>/assets/marketing/deco_1.svg')
  no-repeat;
  z-index: -1;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ content: initial;
+ display: none;
+ }
  }
 
  &::after {
@@ -207,6 +249,11 @@
  background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
  no-repeat;
  z-index: -1;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ content: initial;
+ display: none;
+ }
  }
  }
  }

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

@@ -7,8 +7,8 @@
  </h1>
 
  <h2 i18n>
- The ultimate platform for
- <em>independent content creators</em>
+ The ultimate platform for <em>independent</em> content
+ <em>creators</em>
  </h2>
 
  <p class="m-marketing__description" i18n>