diff --git a/src/pages/meow.astro b/src/pages/meow.astro
index c6e5018..5e15633 100644
--- a/src/pages/meow.astro
+++ b/src/pages/meow.astro
@@ -5,6 +5,8 @@ import Footer from '../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 import { Image } from 'astro:assets';
 
+import '../styles/masonry.css';
+
 const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
 ---
 
@@ -28,13 +30,13 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
     <div class="masonry">
         {
             imageFiles.reverse().map((img) => (
-                <div class="meow-grid">
+                <div class="masonry-grid">
                     <a href={img.default.src}>
                         <Image
                             src={img.default}
                             width="600"
                             alt="Photo of a grey cat with yellow eyes"
-                            class="meow-image"
+                            class="masonry-image"
                         />
                     </a>
                 </div>
@@ -57,68 +59,4 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
         text-align: center;
         margin: 10px;
     }
-    .masonry {
-      column-gap: 10px;
-      margin: 10px;
-    }
-    @media (min-width: 1100px) {
-        .masonry {
-            column-count: 4;
-        }
-    }
-    @media (max-width: 1099px) and (min-width: 900px) {
-        .masonry {
-            column-count: 3;
-        }
-    }
-    @media (max-width: 899px) and (min-width: 400px) {
-        .masonry {
-            column-count: 2;
-        }
-    }
-    @media (max-width: 399px) {
-        .masonry {
-            column-count: 1;
-        }
-    }
-    .meow-grid {
-        display: grid;
-        grid-template-rows: 1fr auto;
-        margin-bottom: 10px;
-        break-inside: avoid;
-    }
-    .meow-image {
-        display: block;
-        max-width: 100%;
-        border-radius: 30px;
-        grid-row: 1 / -1;
-        grid-column: 1;
-        animation: float-rev 1s ease-in-out;
-    }
-    .meow-image:hover {
-        box-shadow: 0px 10px 60px -10px;
-        transform: translatey(-10px);
-        cursor: pointer;
-        animation: float 1s ease-in-out;
-    }
-    @keyframes float {
-        0% {
-            box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
-            transform: translatey(0px);
-        }
-        100% {
-            box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
-            transform: translatey(-10px);
-        }
-    }
-    @keyframes float-rev {
-        0% {
-            box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
-            transform: translatey(-10px);
-        }
-        100% {
-            box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
-            transform: translatey(0px);
-        }
-    }
 </style>
diff --git a/src/styles/masonry.css b/src/styles/masonry.css
new file mode 100644
index 0000000..0fd5b6b
--- /dev/null
+++ b/src/styles/masonry.css
@@ -0,0 +1,75 @@
+/*
+ *                          >>>> Masonry Styles <<<<
+ *
+ * This stylesheet creates a pinterest-like layout, intended for images. This
+ * is currently used for the cat-pictures page.
+ *
+ * The parent div with the masonry must have the class ".masonry".
+ */
+.masonry {
+    column-gap: 10px;
+    margin: 10px;
+}
+@media (min-width: 1100px) {
+    .masonry {
+        column-count: 4;
+    }
+}
+@media (max-width: 1099px) and (min-width: 800px) {
+    .masonry {
+        column-count: 3;
+    }
+}
+@media (max-width: 799px) and (min-width: 400px) {
+    .masonry {
+        column-count: 2;
+    }
+}
+@media (max-width: 399px) {
+    .masonry {
+        column-count: 1;
+    }
+}
+.masonry .masonry-grid {
+    display: grid;
+    grid-template-rows: 1fr auto;
+    margin-bottom: 10px;
+    break-inside: avoid;
+}
+.masonry .masonry-image {
+    display: block;
+    max-width: 100%;
+    border-radius: 30px;
+    grid-row: 1 / -1;
+    grid-column: 1;
+    animation: float-rev 1s ease-in-out;
+}
+@media (min-width: 800px) {
+    /* Doesn't do hover effect if there are fewer than 3 columns */
+    .masonry .masonry-image:hover {
+        box-shadow: 0px 10px 60px -10px;
+        transform: translatey(-10px);
+        cursor: pointer;
+        animation: float 1s ease-in-out;
+    }
+}
+@keyframes float {
+    0% {
+        box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
+        transform: translatey(0px);
+    }
+    100% {
+        box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
+        transform: translatey(-10px);
+    }
+}
+@keyframes float-rev {
+    0% {
+        box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
+        transform: translatey(-10px);
+    }
+    100% {
+        box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
+        transform: translatey(0px);
+    }
+}