created and styled gallery section

src/commons/gallery.jsx

@@ -1,3 +1,76 @@
+import gal1 from "./img/gal-1.jpeg";
+import gal2 from "./img/gal-2.jpeg";
+import gal3 from "./img/gal-3.jpeg";
+import gal4 from "./img/gal-4.jpeg";
+import gal5 from "./img/gal-5.jpeg";
+import gal6 from "./img/gal-6.jpeg";
+import gal7 from "./img/gal-7.jpeg";
+import gal8 from "./img/gal-8.jpeg";
+import gal9 from "./img/gal-9.jpeg";
+import gal10 from "./img/gal-10.jpeg";
+import gal11 from "./img/gal-11.jpeg";
+import gal12 from "./img/gal-12.jpeg";
+import gal13 from "./img/gal-13.jpeg";
+import gal14 from "./img/gal-14.jpeg";
+
 export default function Gallery() {
-  return <section className="gallery">Gallery</section>;
+  return (
+    <section className="gallery">
+      <figure className="gallery__item gallery__item--1">
+        <img src={gal1} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--2">
+        <img src={gal2} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--3">
+        <img src={gal3} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--4">
+        <img src={gal4} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--5">
+        <img src={gal5} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--6">
+        <img src={gal6} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--7">
+        <img src={gal7} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--8">
+        <img src={gal8} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--9">
+        <img src={gal9} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--10">
+        <img src={gal10} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--11">
+        <img src={gal11} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--12">
+        <img src={gal12} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--13">
+        <img src={gal13} alt="Gallery" className="gallery__img" />
+      </figure>
+
+      <figure className="gallery__item gallery__item--14">
+        <img src={gal14} alt="Gallery" className="gallery__img" />
+      </figure>
+    </section>
+  );
 }

src/sass/_gallery.scss

@@ -1,4 +1,83 @@
 .gallery {
-  background-color: $color-grey-dark-1;
+  background-color: $color-grey-light-1;
   grid-column: full-start / full-end;
+
+  display: grid;
+  grid-template-rows: repeat(7, 5vw);
+  grid-template-columns: repeat(8, 1fr);
+  gap: 1.5rem;
+  padding: 1.5rem;
+
+  &__item {
+    &--1 {
+      grid-row: 1 / span 2;
+      grid-column: 1 / span 2;
+    }
+
+    &--2 {
+      grid-row: 1 / span 3;
+      grid-column: 3 / span 3;
+    }
+
+    &--3 {
+      grid-row: 1 / span 2;
+    }
+
+    &--4 {
+      grid-row: 1 / span 2;
+      grid-column: 7 / span 2;
+    }
+
+    &--5 {
+      grid-row: 3 / span 3;
+      grid-column: 1 / span 2;
+    }
+
+    &--6 {
+      grid-row: 4 / span 2;
+      grid-column: 3 / span 2;
+    }
+
+    &--7 {
+      grid-column: 5 / 5;
+    }
+
+    &--8 {
+      grid-row: 3 / span 2;
+      grid-column: 6 / span 2;
+    }
+
+    &--9 {
+      grid-row: 3 / span 3;
+    }
+
+    &--10 {
+      grid-row: 6 / span 2;
+    }
+
+    &--11 {
+      grid-row: 6 / span 2;
+      grid-column: 2 / span 2;
+    }
+
+    &--12 {
+      grid-row: 6 / span 2;
+    }
+
+    &--13 {
+      grid-row: 5 / span 3;
+      grid-column: 5 / span 3;
+    }
+
+    &--14 {
+      grid-row: 6 / span 2;
+    }
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
 }