assets/css/main.css

@@ -139,6 +139,49 @@
   }
 }
 
+/*---------*\
+=  GALLERY  =
+\*---------*/
+.gallery {
+  --hs-grid-space: 24px 14px;
+
+  padding: 0 24px;
+  margin-bottom: 112px;
+}
+
+.gallery-container {
+  position: relative;
+  grid-template-columns: repeat(2, 1fr);
+  justify-content: center;
+  transform: translateY(2rem);
+}
+
+.gallery-image-1 {
+  width: 100%;
+}
+
+.gallery-image-2 {
+  width: 100%;
+}
+
+.gallery-image-3 {
+  width: 100%;
+  grid-column: 1/2 span;
+}
+
+@media screen and (min-width:1025px) {
+  .gallery-container {
+    width: 88%;
+    margin: 0 auto;
+    grid-template-columns: repeat(3, 1fr);
+    transform: translateY(4rem);
+  }
+
+  .gallery-image-3 {
+    grid-column: auto;
+  }
+}
+
 /*CUBE CSS styles*/
 
 /*-------------*\
@@ -148,6 +191,11 @@
   margin-top: var(--hs-flow-space);
 }
 
+.grid-box {
+  display: grid;
+  gap: var(--hs-grid-space);
+}
+
 .flex-box {
   display: flex;
   gap: var(--hs-flex-space);
@@ -177,6 +225,10 @@
   background-color: var(--bg-clr-black);
 }
 
+.bg-clr-gray {
+  background-color: var(--bg-clr-gray);
+}
+
 @media only screen and (max-width: 1024px) {
   .image-mobile {
     display: flex;

index.html

@@ -102,6 +102,13 @@
     </section>
 
     <!--=============== Gallery ===============-->
+    <div class="gallery bg-clr-gray">
+      <figure class="gallery-container grid-box">
+        <img class="gallery-image gallery-image-1" src="./assets/images/gallery-1.jpg" alt="" />
+        <img class="gallery-image gallery-image-2" src="./assets/images/gallery-2.jpg" alt="" />
+        <img class="gallery-image gallery-image-3" src="./assets/images/gallery-3.jpg" alt="" />
+      </figure>
+    </div>
 
     <!--=============== Features ===============-->