created composition for images and finished about section

src/App.scss

@@ -8,6 +8,7 @@
 @import "./sass/base/utilities";
 
 @import "./sass/components/button";
+@import "./sass/components/composition";
 
 @import "./sass/layout/header";
 @import "./sass/layout/grid";

src/commons/about-section/about.jsx

@@ -1,4 +1,7 @@
 import ButtonSecondary from "../../components/button/button-secondary";
+import nat1Large from "../../commons/images/nat-1-large.jpg";
+import nat2Large from "../../commons/images/nat-2-large.jpg";
+import nat3Large from "../../commons/images/nat-3-large.jpg";
 
 function About() {
   return (
@@ -31,7 +34,25 @@ function About() {
 
             <ButtonSecondary text={"Learn More ➯"} />
           </div>
-          <div className="col-1-of-2">Image</div>
+          <div className="col-1-of-2">
+            <div className="composition">
+              <img
+                src={nat1Large}
+                alt="Photo 1"
+                className="composition__photo composition__photo--p1"
+              />
+              <img
+                src={nat2Large}
+                alt="Photo 2"
+                className="composition__photo composition__photo--p2"
+              />
+              <img
+                src={nat3Large}
+                alt="Photo 3"
+                className="composition__photo composition__photo--p3"
+              />
+            </div>
+          </div>
         </div>
       </section>
     </main>

src/sass/components/composition.scss

@@ -0,0 +1,35 @@
+.composition {
+  position: relative;
+  &__photo {
+    width: 55%;
+    box-shadow: 0 1.5rem 4rem rgba($color-black, 0.4);
+    border-radius: 2px;
+    position: absolute;
+    z-index: 10;
+    transition: all 0.2s;
+
+    &--p1 {
+      left: 0;
+      top: -2rem;
+    }
+    &--p2 {
+      right: 0;
+      top: 2rem;
+    }
+    &--p3 {
+      left: 20%;
+      top: 10rem;
+    }
+
+    &:hover {
+      outline: 1.5rem solid $color-primary;
+      transform: scale(1.05) translateY(-0.5rem);
+      box-shadow: 0 2.5rem 4rem rgba($color-black, 0.5);
+      z-index: 20;
+    }
+  }
+
+  &:hover &__photo:not(:hover) {
+    transform: scale(0.95);
+  }
+}