image placement and sizes

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 {