created and styled stories section

src/commons/stories.jsx

@@ -1,10 +1,35 @@
 import React from "react";
 
+import story1 from "../commons/img/story-1.jpeg";
+import story2 from "../commons/img/story-2.jpeg";
+
 export default function Stories() {
   return (
     <React.Fragment>
-      <div className="story__pictures">Story Pictures</div>
-      <div className="story__content">Story Content</div>
+      <div className="story__pictures">
+        <img
+          src={story1}
+          alt="Copule with new house"
+          className="story__img--1"
+        />
+        <img
+          src={story2}
+          alt="Copule with new house"
+          className="story__img--2"
+        />
+      </div>
+      <div className="story__content">
+        <h3 className="heading-3 mb-sm">Happy Customers</h3>
+        <h2 className="heading-2 heading-2--dark mb-md">
+          &ldquo;The best decision of our lives&rdquo;
+        </h2>
+        <p className="story__text">
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+          distinctio necessitatibus pariatur voluptatibus. Quidem consequatur
+          harum volupta!
+        </p>
+        <button className="btn">Find your own home</button>
+      </div>
     </React.Fragment>
   );
 }

src/sass/_story.scss

@@ -2,10 +2,48 @@
   &__pictures {
     background-color: $color-primary;
     grid-column: full-start / col-end 4;
+    background-image: linear-gradient(
+        rgba($color-primary, 0.5),
+        rgba($color-primary, 0.5)
+      ),
+      url(../commons/img/back.jpg);
+
+    display: grid;
+    grid-template-rows: repeat(6, 1fr);
+    grid-template-columns: repeat(6, 1fr);
+    align-items: center;
+  }
+
+  &__img--1 {
+    width: 100%;
+    grid-row: 2 / 6;
+    grid-column: 2 / 6;
+    box-shadow: 0 2rem 5rem rgba(#000, 0.1);
+  }
+
+  &__img--2 {
+    width: 115%;
+    z-index: 1;
+    grid-row: 4 / 6;
+    grid-column: 4 / 7;
+    box-shadow: 0 2rem 5rem rgba(#000, 0.2);
   }
 
   &__content {
     background-color: $color-grey-light-1;
     grid-column: col-start 5 / full-end;
+
+    padding: 6rem 8vw;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  &__text {
+    font-size: 1.5rem;
+    font-style: italic;
+    margin-bottom: 4rem;
   }
 }

src/sass/_typography.scss

@@ -9,10 +9,24 @@
 
 .heading-2 {
   @extend %heading;
+  font-size: 4rem;
+  font-style: italic;
+  line-height: 1;
+
+  &--light {
+    color: $color-grey-light-1;
+  }
+
+  &--dark {
+    color: $color-grey-dark-1;
+  }
 }
 
 .heading-3 {
   @extend %heading;
+  font-size: 1.6rem;
+  color: $color-primary;
+  text-transform: uppercase;
 }
 
 .heading-4 {
@@ -27,3 +41,20 @@
     color: $color-grey-dark-1;
   }
 }
+
+.btn {
+  background-color: $color-primary;
+  color: #fff;
+  border: none;
+  border-radius: 0;
+  font-family: $font-display;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  padding: 1.8rem 3rem;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: $color-primary-dark;
+  }
+}

src/sass/_utils.scss

@@ -0,0 +1,12 @@
+.mb-sm {
+  margin-bottom: 2rem;
+}
+.mb-md {
+  margin-bottom: 3rem;
+}
+.mb-lg {
+  margin-bottom: 4rem;
+}
+.mb-hg {
+  margin-bottom: 8rem;
+}

src/sass/main.scss

@@ -1,5 +1,6 @@
 @import "base";
 @import "typography";
+@import "utils";
 
 @import "sidebar";
 @import "header";