created bg-video component and finished stories section

src/App.scss

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

src/commons/stories-section/stories.jsx

@@ -1,10 +1,19 @@
 import ButtonSecondary from "../../components/button/button-secondary";
 import nat8 from "../images/nat-8.jpg";
 import nat9 from "../images/nat-9.jpg";
+import bgmp4 from "../images/video.mp4";
+import bgwebm from "../images/video.webm";
 
 function Stories() {
   return (
     <section className="section-stories">
+      <div className="bg-video">
+        <video className="bg-video__content" autoPlay muted loop>
+          <source src={bgmp4} type="video/mp4" />
+          <source src={bgwebm} type="video/webm" />
+          Your browser is not supporting the video format!
+        </video>
+      </div>
       <div className="u-center-text u-margin-bottom-big">
         <h2 className="heading-secondary">We make people geniunely happy</h2>
       </div>

src/sass/components/_bg-video.scss

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

src/sass/components/_button.scss

@@ -69,8 +69,8 @@
   cursor: pointer;
   border-bottom: 1px solid $color-primary;
   padding: 0.3rem;
-  background-color: $color-grey-light-1;
   transition: all 0.2s;
+  background-color: transparent;
 
   &:hover {
     background-color: $color-primary;

src/sass/components/_story.scss

@@ -2,7 +2,7 @@
   width: 75%;
   margin: 0 auto;
   box-shadow: 0 3rem 6rem rgba($color-black, 0.1);
-  background-color: $color-white;
+  background-color: rgba($color-white, 60%);
   border-radius: 3px;
   padding: 6rem;
   padding-left: 9rem;
@@ -40,6 +40,7 @@
     text-align: center;
     opacity: 0;
     transition: all 0.5s;
+    backface-visibility: hidden;
   }
 
   &:hover &__caption {

src/sass/pages/_home.scss

@@ -30,5 +30,5 @@
 
 .section-stories {
   padding: 15rem;
-  background-color: $color-grey-light-1;
+  position: relative;
 }