assets/styles/styles.css

@@ -89,8 +89,8 @@ header {
 .cards-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-  gap: 20px;
   justify-content: center;
+  gap: 20px;
   width: 57%;
 }
 
@@ -115,6 +115,34 @@ header {
   line-height: 24px;
 }
 
+.gallery {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background: #e0e0e0;
+  margin-bottom: 95px;
+}
+
+.gallery-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
+  justify-content: center;
+  gap: 40px;
+  width: 92%;
+}
+
+.gallery-container figure {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  top: 60px;
+  width: 100%;
+}
+
+.gallery-container img {
+  width: 100%;
+}
+
 @media (max-width: 414px) {
   .banner-desktop {
     display: none;
@@ -155,6 +183,23 @@ header {
   .cards {
     margin-top: 0;
   }
+
+  .gallery-container {
+    gap: 24px 14px;
+  }
+
+  .gallery-container figure {
+    top: 30px;
+  }
+
+  .image03 {
+    position: relative;
+    left: 54%;
+  }
+
+  .image03 img {
+    width: 208%;
+  }
 }
 
 @media (min-width: 350px) and (max-width: 380px) {
@@ -168,3 +213,13 @@ header {
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   }
 }
+
+@media (min-width: 415px) and (max-width: 599px) {
+  .gallery-container {
+    grid-template-columns: repeat(auto-fill, minmax(94%, 1fr));
+  }
+
+  .gallery-container img {
+    width: 94%;
+  }
+}

index.html

@@ -100,6 +100,19 @@
           </div>
         </div>
       </div>
+      <div class="gallery">
+        <div class="gallery-container">
+          <figure class="image01">
+            <img src="./assets/images/image-01.svg" alt="" />
+          </figure>
+          <figure class="image02">
+            <img src="./assets/images/image-02.svg" alt="" />
+          </figure>
+          <figure class="image03">
+            <img src="./assets/images/image-03.svg" alt="" />
+          </figure>
+        </div>
+      </div>
     </main>
   </body>
 </html>