Merge pull request #114 from katatsu12/fix/index_technologies_block

Fix mobile size Index page Technology block: Add white shadow behind
activebridge · Mar 14, 2024 · 08c19b9 · 08c19b9
2 parents f07d1dd + f4bfdaf
commit 08c19b9
Showing 1 changed file with 24 additions and 4 deletions.
diff --git a/_sass/index.scss b/_sass/index.scss
@@ -373,14 +373,34 @@ body {
         }
 
         .technologies_items-svg {
-          background: no-repeat url(/assets/images/index/technologies_m_table.svg);
-          background-position: center top 10px;
           height: 100%;
           position: relative;
-          width: 100%;
+          margin: 0 auto;
+          max-width: 340px;
           -webkit-mask-image: linear-gradient(to top, transparent 0%, black 50%, black 100%);
-          z-index: 1;
+          mask-image: linear-gradient(to top, transparent 0%, black 50%, black 100%);
+
+          &::before {
+            content: "";
+            background: linear-gradient($white, transparent);
+            bottom: 0;
+            left: 0;
+            position: absolute;
+            top: 40px;
+            right: 0;
+            z-index: 1;
+          }
 
+          &::after {
+            content: "";
+            background: no-repeat url(/assets/images/index/technologies_m_table.svg) center top;
+            bottom: 0;
+            left: 0;
+            position: absolute;
+            top: 40px;
+            right: 0;
+            z-index: 2;
+          }
         }
       }
     }