diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index b7c30e7a..fe169254 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -1,8 +1,13 @@
 :root {
-  --grid-square: repeat(2, minmax(0, 1fr));
-  --grid-vertical: repeat(3, minmax(0, 1fr));
+  --columns-two: repeat(2, minmax(0, 1fr));
+  --columns-three: repeat(3, minmax(0, 1fr));
+
+  --grid-poster: var(--columns-two);
+  --grid-square: var(--columns-two);
+  --grid-vertical: var(--columns-three);
 
   @media screen and (min-width: 768px) {
+    --grid-poster: var(--columns-three);
     --grid-square: repeat(4, minmax(0, 1fr));
     --grid-vertical: repeat(6, minmax(0, 1fr));
   }
@@ -20,6 +25,20 @@
     margin-top: var(--spacing-base);
   }
 
+  &.poster {
+    grid-template-columns: var(--grid-poster);
+
+    & a {
+      aspect-ratio: var(--aspect-ratio-banner);
+    }
+
+    & img {
+      border-radius: var(--border-radius-slight);
+      width: 100%;
+      height: auto;
+    }
+  }
+
   &.square {
     grid-template-columns: var(--grid-square);
 
diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css
index 9f4c8091..581998b6 100644
--- a/src/assets/styles/pages/watching.css
+++ b/src/assets/styles/pages/watching.css
@@ -3,135 +3,45 @@ a:active > .watching.hero::after {
   border-color: var(--accent-color-hover);
 }
 
-.watching.hero {
-  position: relative;
-  display: flex;
-  aspect-ratio: var(--aspect-ratio-banner);
-
-  & img {
-    aspect-ratio: var(--aspect-ratio-banner);
-    border-radius: var(--border-radius-slight);
-    height: auto;
-    width: 100%;
-  }
-
-  & .meta-text {
-    color: white;
-    position: absolute;
-    left: var(--spacing-sm);
-    bottom: var(--spacing-sm);
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-
-    & .header {
-      font-weight: var(--font-weight-bold);
-    }
-
-    & .subheader {
-      font-size: var(--font-size-sm);
-      display: inline-flex;
-      gap: var(--spacing-xs);
-    }
-
-    & .header,
-    & .subheader {
-      line-height: var(--line-height-md);
-      text-shadow: var(--text-shadow-default);
-    }
-  }
-
-  &::after {
-    position: absolute;
-    z-index: 1;
-    content: '';
-    top: 0;
-    left: 0;
-    box-shadow: var(--box-shadow-media);
-    width: 100%;
-    height: 100%;
-    border: var(--border-default);
-    border-radius: var(--border-radius-slight);
-    transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
-  }
-}
-
-.icon-link + .poster.grid {
-  margin-top: var(--spacing-base);
-}
-
-.poster {
-  & img {
-    border-radius: var(--border-radius-slight);
-    width: 100%;
-    height: auto;
-  }
-
-  &.media-grid {
-    display: grid;
-    gap: var(--spacing-sm);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    margin-bottom: var(--spacing-base);
-
-    @media screen and (min-width: 768px) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    & a {
-      display: flex;
-      aspect-ratio: var(--aspect-ratio-banner);
-    }
-
-    & a:hover .item::after,
-    & a:active .item::after {
-      border-color: var(--accent-color-hover);
-    }
-
-    & div {
-      position: relative;
-
-      & .meta-text {
-        position: absolute;
-        z-index: 2;
-        padding: 0 var(--spacing-sm);
-        bottom: var(--spacing-sm);
-        width: 100%;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-
-        & .header,
-        & .subheader,
-        & .rating {
-          color: var(--color-lightest);
-          font-size: var(--font-size-sm);
-          line-height: var(--line-height-md);
-          text-shadow: var(--text-shadow-default);
-        }
-
-        & .header {
-          font-weight: var(--font-weight-bold);
-        }
-
-        & .subheader {
-          display: flex;
-          align-items: center;
-          gap: var(--spacing-xs);
-        }
-
-        & .rating {
-          font-size: calc(var(--font-size-sm) * 0.75);
-        }
-      }
-    }
-  }
-
-  &.item {
+.watching {
+  &.hero {
     position: relative;
     display: flex;
-    overflow: hidden;
     aspect-ratio: var(--aspect-ratio-banner);
 
+    & img {
+      aspect-ratio: var(--aspect-ratio-banner);
+      border-radius: var(--border-radius-slight);
+      height: auto;
+      width: 100%;
+    }
+
+    & .meta-text {
+      color: white;
+      position: absolute;
+      left: var(--spacing-sm);
+      bottom: var(--spacing-sm);
+      z-index: 2;
+      display: flex;
+      flex-direction: column;
+
+      & .header {
+        font-weight: var(--font-weight-bold);
+      }
+
+      & .subheader {
+        font-size: var(--font-size-sm);
+        display: inline-flex;
+        gap: var(--spacing-xs);
+      }
+
+      & .header,
+      & .subheader {
+        line-height: var(--line-height-md);
+        text-shadow: var(--text-shadow-default);
+      }
+    }
+
     &::after {
       position: absolute;
       z-index: 1;
@@ -146,42 +56,46 @@ a:active > .watching.hero::after {
       transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
     }
   }
-}
 
-.watching-focus {
-  margin-top: var(--spacing-base);
-  border-bottom: 0;
+  &.focus {
+    margin-top: var(--spacing-base);
+    border-bottom: 0;
 
-  & img {
-    aspect-ratio: var(--aspect-ratio-banner);
-  }
+    & img {
+      aspect-ratio: var(--aspect-ratio-banner);
+    }
 
-  & .watching-meta {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-    margin: var(--margin-vertical-base-horizontal-zero);
+    & .meta {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-sm);
+      margin: var(--margin-vertical-base-horizontal-zero);
 
-    & p {
-      margin: 0;
+      & p {
+        margin: 0;
 
-      &.title {
-        font-size: var(--font-size-xl);
-        line-height: var(--line-height-md);
-      }
+        &.title {
+          font-size: var(--font-size-xl);
+          line-height: var(--line-height-md);
+        }
 
-      &.sub-meta {
-        font-size: var(--font-size-sm);
+        &.sub-meta {
+          font-size: var(--font-size-sm);
 
-        & svg {
-          width: var(--sizing-svg-sm);
-          height: var(--sizing-svg-sm);
+          & svg {
+            width: var(--sizing-svg-sm);
+            height: var(--sizing-svg-sm);
+          }
         }
       }
     }
-  }
 
-  & .footnotes {
-    padding-bottom: 0;
+    & .footnotes {
+      padding-bottom: 0;
+    }
   }
+}
+
+.icon-link + .poster.grid {
+  margin-top: var(--spacing-base);
 }
\ No newline at end of file
diff --git a/src/pages/dynamic/watching/movie.html b/src/pages/dynamic/watching/movie.html
index a9a885ec..424ee201 100644
--- a/src/pages/dynamic/watching/movie.html
+++ b/src/pages/dynamic/watching/movie.html
@@ -11,7 +11,7 @@ schema: movie
   {{ movie.title }} / {{ movie.year }}{% if move.rating %} ({{ movie.rating }}){% endif %}
 {%- endcapture -%}
 <a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
-<article class="watching-focus">
+<article class="watching focus">
   <img
     srcset="
       https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm&type=webp 256w,
@@ -29,7 +29,7 @@ schema: movie
     width="256"
     height="180"
   />
-  <div class="watching-meta">
+  <div class="meta">
     <p class="title"><strong>{{ movie.title }}</strong>{%- if movie.year and not movie.rating %} ({{ movie.year }}){%- endif -%}</p>
     {%- if movie.rating -%}
       <p>
diff --git a/src/pages/dynamic/watching/show.html b/src/pages/dynamic/watching/show.html
index ad0ffb55..f9eb03e1 100644
--- a/src/pages/dynamic/watching/show.html
+++ b/src/pages/dynamic/watching/show.html
@@ -11,7 +11,7 @@ schema: show
   {{ show.title }} / {{ show.year }}
 {%- endcapture -%}
 <a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
-<article class="watching-focus">
+<article class="watching focus">
   <img
     srcset="
       https://cdn.coryd.dev{{ show.backdrop }}?class=bannersm&type=webp 256w,
@@ -29,7 +29,7 @@ schema: show
     width="256"
     height="180"
   />
-  <div class="watching-meta">
+  <div class="meta">
     <p class="title"><strong>{{ show.title }}</strong>{%- if show.year %} ({{ show.year }}){%- endif -%}</p>
     {%- if show.favorite -%}
       <p class="sub-meta favorite">{% tablericon "heart" %} This is one of my favorite shows!</p>