created and styled features section

src/App.js

@@ -1,3 +1,4 @@
+import "font-awesome/css/font-awesome.min.css";
 import "./sass/main.scss";
 import Sidebar from "./commons/sidebar";
 import Header from "./commons/header";

src/commons/features.jsx

@@ -1,3 +1,56 @@
 export default function Features() {
-  return <section className="features">Features</section>;
+  return (
+    <section className="features">
+      <div className="feature">
+        <i class="feature__icon fa fa-globe"></i>
+        <h4 className="heading-4 heading-4--dark">World's best luxury homes</h4>
+        <p className="feature__text">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex
+          inventore, quidem tempora repellendus.
+        </p>
+      </div>
+      <div className="feature">
+        <i class="feature__icon fa fa-trophy"></i>
+        <h4 className="heading-4 heading-4--dark">Only the best properties.</h4>
+        <p className="feature__text">
+          Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus
+          rerum sed a eligendi aut quia.
+        </p>
+      </div>
+      <div className="feature">
+        <i class="feature__icon fa fa-map"></i>
+        <h4 className="heading-4 heading-4--dark">
+          All homes in top locations
+        </h4>
+        <p className="feature__text">
+          Tenetur distinctio necessitatibus pariatur voluptatibus quidem
+          consequatur harum.
+        </p>
+      </div>
+      <div className="feature">
+        <i class="feature__icon fa fa-key"></i>
+        <h4 className="heading-4 heading-4--dark">New home in one week</h4>
+        <p className="feature__text">
+          Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit
+          amet consectetur adipisicing elit.
+        </p>
+      </div>
+      <div className="feature">
+        <i class="feature__icon fa fa-line-chart"></i>
+        <h4 className="heading-4 heading-4--dark">Top 1% realtors</h4>
+        <p className="feature__text">
+          Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio
+          necessitatibus pariatur voluptatibus.
+        </p>
+      </div>
+      <div className="feature">
+        <i class="feature__icon fa fa-lock"></i>
+        <h4 className="heading-4 heading-4--dark">Secure payments on nexter</h4>
+        <p className="feature__text">
+          Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia
+          quae.
+        </p>
+      </div>
+    </section>
+  );
 }

src/sass/_features.scss

@@ -1,4 +1,28 @@
 .features {
-  background-color: $color-grey-dark-2;
   grid-column: center-start / center-end;
+
+  margin: 15rem 0;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+  gap: 60px;
+  align-items: start;
+}
+
+.feature {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  row-gap: 1.5rem;
+  column-gap: 2.5rem;
+
+  &__icon {
+    color: $color-primary;
+    font-size: 4.5rem;
+    grid-row: 1 / span 2;
+    transform: translateY(-1rem);
+  }
+
+  &__text {
+    font-size: 1.7rem;
+  }
 }

src/sass/_typography.scss

@@ -0,0 +1,29 @@
+%heading {
+  font-family: $font-display;
+  font-weight: 400;
+}
+
+.heading-1 {
+  @extend %heading;
+}
+
+.heading-2 {
+  @extend %heading;
+}
+
+.heading-3 {
+  @extend %heading;
+}
+
+.heading-4 {
+  @extend %heading;
+  font-size: 1.9rem;
+
+  &--light {
+    color: $color-grey-light-1;
+  }
+
+  &--dark {
+    color: $color-grey-dark-1;
+  }
+}