opinions section finished

Natours/starter/sass/components/_bg-video.scss

@@ -0,0 +1,16 @@
+.bg-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+  opacity: .15;
+  overflow: hidden;
+
+  &__content {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+}

Natours/starter/sass/components/_story.scss

@@ -2,14 +2,14 @@
   width: 75%;
   margin: 0 auto;
   box-shadow: 0 3rem 6rem rgba($color-black, 0.1);
-  background-color: $color-white;
+  background-color: rgba($color-white, .6);
   border-radius: 3px;
   padding: 6rem;
   padding-left: 9rem;
   font-size: $default-font-size;
   transform: skewX(-12deg);
 
-  & > * {
+  &>* {
     transform: skewX(12deg);
   }
 
@@ -24,13 +24,41 @@
     -webkit-clip-path: circle(50% at 50% 50%);
     clip-path: circle(50% at 50% 50%);
     transform: translateX(-3rem) skewX(12deg);
+    position: relative;
   }
 
   &__img {
     height: 100%;
+    transform: translateX(-4rem) scale(1.4);
+    backface-visibility: hidden;
+    transition: all .5s;
   }
 
   &__text {
     transform: skewX(12deg);
   }
+
+  &__caption {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, 20%);
+    color: $color-white;
+    text-transform: uppercase;
+    font-size: 1.7rem;
+    text-align: center;
+    opacity: 0;
+    transition: all .5s;
+    backface-visibility: hidden;
+  }
+
+  &:hover &__caption {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+
+  &:hover &__img {
+    transform: translateX(-4rem) scale(1);
+    filter: blur(3px) brightness(80%);
+  }
 }

Natours/starter/sass/main.scss

@@ -12,6 +12,7 @@
 @import "components/feature-box";
 @import "components/card";
 @import "components/story";
+@import "components/bg-video";
 
 @import "layout/header";
 @import "layout/grid";

Natours/starter/sass/pages/_home.scss

@@ -6,18 +6,16 @@
 
 .section-features {
   padding: 20rem 0;
-  background-image: linear-gradient(
-      to right bottom,
+  background-image: linear-gradient(to right bottom,
       rgba($color-primary-light, 0.801),
-      rgba($color-primary-dark, 0.808)
-    ),
+      rgba($color-primary-dark, 0.808)),
     url("../img/nat-4.jpg");
   background-size: cover;
 
   margin-top: -10rem;
   transform: skewY(-7deg);
 
-  & > * {
+  &>* {
     transform: skewY(7deg);
   }
 }
@@ -29,6 +27,6 @@
 }
 
 .section-stories {
+  position: relative;
   padding: 15rem 0;
-  background-color: $color-grey-light-1;
 }