General styles

src/components/sections/products/app/app.module.scss

@@ -49,7 +49,7 @@
   div:first-child {
     @include respond-to('mobile') {
       width: 100%;
-      min-height: tovw(300px, 'mobile', 340px);
+      min-height: tovw(190px, 'mobile', 340px);
     }
 
     position: relative;

src/components/sections/products/network/network.module.scss

@@ -113,7 +113,7 @@
 
     .mobile_img_container {
       @include respond-to('mobile') {
-        min-height: tovw(268px, 'mobile', 450px);
+        min-height: tovw(245px, 'mobile', 450px);
       }
 
       .network__img__mobile {

src/components/sections/products/stack/stack.module.scss

@@ -3,7 +3,7 @@
 .section {
   @include respond-to('mobile') {
     padding: 0;
-    padding-bottom: tovw(68px, 'mobile');
+    padding-bottom: tovw(40px, 'mobile');
   }
 
   position: relative;
@@ -121,11 +121,11 @@
 
   div:last-child {
     .image__container {
-      @media screen and (max-width: 1450px) {
-        min-height: unset;
+      @include respond-to('mobile') {
+        min-height: tovw(410px, 'mobile', 460px);
       }
 
-      min-height: tovw(1540px, 'default', 758px);
+      min-height: tovw(1520px, 'default', 720px);
 
       .stack__img {
         width: 100%;

src/components/sections/products/token/index.tsx

@@ -56,11 +56,13 @@ const Token = ({ data }: Props) => {
             {data?.tokenHeading}
           </Heading>
           <p>{data?.tokenDesc}</p>
-          <img
-            className={s.token__img__mobile}
-            ref={tokenImgMobileRef}
-            alt="token"
-          />
+          <div className={s.mobile_img_container}>
+            <img
+              className={s.token__img__mobile}
+              ref={tokenImgMobileRef}
+              alt="token"
+            />
+          </div>
           <p>LNT will also be used to:</p>
           <div className={s.features}>
             <div>

src/components/sections/products/token/token.module.scss

@@ -116,16 +116,20 @@
       mix-blend-mode: screen;
     }
 
-    .token__img__mobile {
-      @include respond-to('mobile') {
-        display: unset;
-        margin: tovw(60px, 'mobile') 0 tovw(5px, 'mobile') 0;
-        width: 100%;
-        mix-blend-mode: screen;
-        max-width: tovw(400px, 'default', 400px);
-      }
+    .mobile_img_container {
+      min-height: tovw(235px, 'mobile', 430px);
 
-      display: none;
+      .token__img__mobile {
+        @include respond-to('mobile') {
+          display: unset;
+          margin: tovw(30px, 'mobile') 0 tovw(5px, 'mobile') 0;
+          width: 100%;
+          mix-blend-mode: screen;
+          max-width: tovw(400px, 'default', 400px);
+        }
+
+        display: none;
+      }
     }
   }
 }

src/components/sections/products/watchers/index.tsx

@@ -59,12 +59,13 @@ const Watchers = ({ data }: Props) => {
           <p>{data?.watchersP01}</p>
           <p>{data?.watchersP02}</p>
           <p>{data?.watchersListHead}</p>
-          <img
-            ref={watchersMobileImgRef}
-            className={s.watchers__img__mobile}
-            // src={data?.watchersMobileImage?.url}
-            alt="network"
-          />
+          <div className={s.mobile_img_container}>
+            <img
+              ref={watchersMobileImgRef}
+              className={s.watchers__img__mobile}
+              alt="network"
+            />
+          </div>
           <div className={s.features}>
             <ol>
               <li>
@@ -88,12 +89,7 @@ const Watchers = ({ data }: Props) => {
             variant="lg"
             dangerouslySetInnerHTML={{ __html: data?.watchersHeading }}
           />
-          <img
-            ref={watchersImgRef}
-            className={s.watchers__img}
-            // src={data?.watchersImage?.url}
-            alt="network"
-          />
+          <img ref={watchersImgRef} className={s.watchers__img} alt="network" />
         </div>
       </Container>
     </Section>

src/components/sections/products/watchers/watchers.module.scss

@@ -3,7 +3,7 @@
 .section {
   @include respond-to('mobile') {
     padding: 0;
-    padding-bottom: tovw(88px, 'mobile');
+    padding-bottom: tovw(50px, 'mobile');
   }
 
   position: relative;
@@ -62,6 +62,10 @@
       }
 
       .features {
+        @include respond-to('mobile') {
+          margin-top: tovw(10px, 'mobile');
+        }
+
         margin-top: tovw(85px, 'default', 40px);
 
         ol {
@@ -145,16 +149,25 @@
       mix-blend-mode: screen;
     }
 
-    .watchers__img__mobile {
+    .mobile_img_container {
       @include respond-to('mobile') {
-        display: unset;
-        width: 135%;
-        transform: translateX(-11%);
-        mix-blend-mode: screen;
-        max-width: tovw(600px, 'default', 600px);
+        min-height: tovw(205px, 'mobile', 350px);
       }
 
-      display: none;
+      min-height: tovw(1520px, 'default', 720px);
+
+      .watchers__img__mobile {
+        @include respond-to('mobile') {
+          display: unset;
+          width: 135%;
+          transform: translateX(-11%);
+          margin: tovw(15px, 'mobile') 0;
+          mix-blend-mode: screen;
+          max-width: tovw(600px, 'default', 600px);
+        }
+
+        display: none;
+      }
     }
   }
 }