Added image grid

css/portfolio.css

@@ -1,27 +1,31 @@
-.portfolio {
-    padding-top: 2rem;
+#portfolio-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    grid-auto-flow: dense;
+    gap: 0.5rem;
 
-    & > header {
-        justify-content: center;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-
-        & > p {
-            margin: 0;
-        }
-
-        & > * {
-            text-align: center;
-            max-width: 40rem;
-        }
+    & > * {
+        overflow: hidden;
+        border-radius: var(--small-border-radius);
     }
 
-    & > div:nth-child(2) {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        justify-content: center;
-        padding: 3rem;
+    & img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
     }
-}
+
+    & > :nth-child(7n) {
+        grid-column: span 2;
+        grid-row: span 2;
+    }
+
+    & > :nth-child(11n+5) {
+        grid-column: span 2;
+    }
+
+    & > :nth-child(13n+9) {
+        grid-row: span 2;
+    }
+}