add sliding cards effect

assets/scss/_styles_project.scss

@@ -9,9 +9,6 @@
   }
 }
 
-
-
-
 @media (min-width: 768px)  {
   .td-sidebar {
     padding-top: 5rem;
@@ -104,3 +101,16 @@
   border: none;
   margin-top: 1rem;
 }
+
+.sp-feature {
+  background-color: lightgoldenrodyellow;
+  position: sticky;
+  top: 20vh;
+  height: 60vh;
+  align-items: center;
+}
+
+.sp-advantages-header {
+  position: sticky;
+  top: 14vh;
+}

content/en/_index.html

@@ -132,7 +132,7 @@ linkTitle = "SelfPrivacy"
 {{< /blocks/section >}}
 
 {{< blocks/section color="100" type="section" >}}
-	<div class="row w-100">
+	<div class="row w-100 sp-advantages-header">
 		<h2 class="mx-auto text-center">Advantages</h2>
 	</div>
 

layouts/shortcodes/landing-feature.html

@@ -2,7 +2,7 @@
 {{ $title := .Get 1 }}
 {{ $side := .Get 2 }}
 {{ if eq $side "right" }}
-<div class="d-flex flex-column flex-lg-row flex-xl-row justify-content-md-center mt-5 align-items-center">
+<div class="d-flex flex-column flex-lg-row flex-xl-row justify-content-md-center pt-5 align-items-center sp-feature">
         <div class="col-xl-4 col-lg-6 col-md-8 col-xs-12 my-auto px-5">
             {{ if $title }}
                 <h2 class="sp-feature-title">{{ $title }}</h2>
@@ -15,7 +15,7 @@
         </div>
         {{ end }}
     {{ else }}
-<div class="d-flex flex-column-reverse flex-lg-row flex-xl-row justify-content-md-center mt-5 align-items-center">
+<div class="d-flex flex-column-reverse flex-lg-row flex-xl-row justify-content-md-center pt-5 align-items-center sp-feature">
         {{ if $illustration }}
         <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12 my-auto">
             <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">