image placement and sizes

css/components.css

@@ -1,5 +1,9 @@
 .btn {
-    background-image: linear-gradient(to right, var(--primary), var(--primary-container));
+    background-image: linear-gradient(
+        to right,
+        var(--primary),
+        var(--primary-container)
+    );
     padding: 1rem 2rem;
     font-size: 1rem;
     border-radius: 100rem;
@@ -112,7 +116,7 @@
 
     & > * {
         text-align: center;
-        max-width: 40rem;
+        /*max-width: 40rem;*/
     }
 
     & > nav {
@@ -160,4 +164,4 @@
     & > :last-child {
         grid-column: 1 / -1;
     }
-}
+}

css/portfolio.css

@@ -1,7 +1,9 @@
 #portfolio-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    grid-auto-rows: 280px;
+    /*grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));*/
+    grid-template-columns: repeat(12, 1fr);
+    grid-auto-rows: 106px;
+    /*grid-auto-rows: 210px;*/
     grid-auto-flow: dense;
     gap: 1.5rem;
 
@@ -9,7 +11,9 @@
         overflow: hidden;
         border-radius: var(--border-radius);
         background: var(--surface-container-highest);
-        transition: transform 0.3s, box-shadow 0.3s;
+        transition:
+            transform 0.3s,
+            box-shadow 0.3s;
         position: relative;
         cursor: pointer;
     }
@@ -31,7 +35,20 @@
         transform: scale(1.08);
     }
 
-    & > :nth-child(7n) {
+    & > :has(.tall) {
+        grid-column: span 3;
+        grid-row: span 4;
+    }
+    & > :has(.wide) {
+        grid-column: span 4;
+        grid-row: span 3;
+    }
+    & > :has(.large) {
+        grid-row: span 2;
+        grid-column: span 2;
+    }
+
+    /*& > :nth-child(7n) {
         grid-column: span 2;
         grid-row: span 2;
     }
@@ -42,7 +59,7 @@
 
     & > :nth-child(13n+9) {
         grid-row: span 2;
-    }
+    }*/
 }
 
 #lightbox {