diff --git a/generate/build.tsx b/generate/build.tsx
index 0338899..bab9dc0 100644
--- a/generate/build.tsx
+++ b/generate/build.tsx
@@ -123,7 +123,7 @@ Object.keys(items).forEach((year) => {
 const html = renderToString(
   <Base isDev={ENVIRONMENT == "dev"}>
     <Header />
-    <div className="container mx-auto p-4">
+    <div className="container mx-auto p-4 flex flex-col gap-4">
       {Object.keys(items).sort().reverse().map((year) => (
         <YearPhotos
           year={year}
diff --git a/generate/static/css/tailwind.css b/generate/static/css/tailwind.css
index a9e4ea8..c838540 100644
--- a/generate/static/css/tailwind.css
+++ b/generate/static/css/tailwind.css
@@ -620,12 +620,36 @@
   .grid-flow-row-dense {
     grid-auto-flow: row dense;
   }
+  .\[grid-template-columns\:repeat\(auto-fill\,minmax\(256px\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(256px,1fr));
+  }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
   .grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .flex-col {
+    flex-direction: column;
+  }
   .items-center {
     align-items: center;
   }
@@ -635,6 +659,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
@@ -655,9 +682,6 @@
   .object-cover {
     object-fit: cover;
   }
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -711,24 +735,69 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
-  .sm\:h-1\/2 {
+  .sm\:\[grid-column\:span_2\] {
     @media (width >= 40rem) {
-      height: calc(1/2 * 100%);
+      grid-column: span 2;
     }
   }
-  .sm\:w-1\/2 {
+  .sm\:\[grid-template-columns\:repeat\(auto-fill\,minmax\(256px\,1fr\)\)\] {
     @media (width >= 40rem) {
-      width: calc(1/2 * 100%);
+      grid-template-columns: repeat(auto-fill,minmax(256px,1fr));
     }
   }
-  .lg\:h-1\/3 {
-    @media (width >= 64rem) {
-      height: calc(1/3 * 100%);
+  .md\:\[grid-column\:span_2\] {
+    @media (width >= 48rem) {
+      grid-column: span 2;
     }
   }
-  .lg\:w-1\/3 {
+  .lg\:\[grid-column\:span_2\] {
     @media (width >= 64rem) {
-      width: calc(1/3 * 100%);
+      grid-column: span 2;
+    }
+  }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-5 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  .xl\:\[grid-column\:span_2\] {
+    @media (width >= 80rem) {
+      grid-column: span 2;
+    }
+  }
+  .xl\:\[grid-template-columns\:repeat\(auto-fill\,minmax\(128px\,1fr\)\)\] {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(auto-fill,minmax(128px,1fr));
+    }
+  }
+  .xl\:\[grid-template-columns\:repeat\(auto-fill\,minmax\(200px\,1fr\)\)\] {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
+    }
+  }
+  .xl\:\[grid-template-columns\:repeat\(auto-fill\,minmax\(512px\,1fr\)\)\] {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(auto-fill,minmax(512px,1fr));
+    }
+  }
+  .xl\:grid-cols-7 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-8 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
     }
   }
   .xl\:text-3xl {
diff --git a/generate/templates/YearPhotos.tsx b/generate/templates/YearPhotos.tsx
index aea442a..2b2b71a 100644
--- a/generate/templates/YearPhotos.tsx
+++ b/generate/templates/YearPhotos.tsx
@@ -13,7 +13,7 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
       </h2>
 
       <div
-        className="grid grid-cols-6 grid-flow-row-dense gap-2"
+        className="grid grid-cols-2 lg:grid-cols-5 xl:grid-cols-7 grid-flow-row-dense gap-2"
         id={`gallery-${year}`}
         data-type="gallery"
         data-year={year}
@@ -24,7 +24,7 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
             <a
               href={image.image}
               className={`w-full h-full ${
-                aspectRatio < 0.95 ? "[grid-row:span_2] aspect-[1/2]" : aspectRatio > 1.05 ? "[grid-column:span_2] aspect-[2/1]" : "aspect-square"
+                aspectRatio < 0.95 ? "" : aspectRatio > 1.05 ? "lg:[grid-column:span_2]" : "aspect-square"
               }`}
               key={`${year}-${image.id}`}
               data-slide-name={image.id}