fix(media.css): highlight text helper class for grids and heros

src/assets/styles/components/media-grid.css

@@ -35,14 +35,6 @@
     left: var(--spacing-sm);
     bottom: var(--spacing-sm);
     max-width: calc(var(--sizing-full) - calc(var(--spacing-sm) * 2));
-    color: var(--text-color-inverted);
-    background-color: var(--section-color, var(--accent-color));
-    padding: var(--spacing-xs);
-    border-radius: var(--border-radius-slight);
-
-    & > * {
-      color: var(--text-color-inverted);
-    }
 
     .header,
     .subheader {

src/assets/styles/pages/media.css

@@ -32,3 +32,14 @@
 .concerts {
   margin-top: var(--spacing-base);
 }
+
+.media-highlight {
+  color: var(--text-color-inverted);
+  background-color: var(--section-color, var(--accent-color));
+  padding: var(--spacing-xs);
+  border-radius: var(--border-radius-slight);
+
+  & > * {
+    color: var(--text-color-inverted);
+  }
+}

src/includes/media/grid.liquid

@@ -6,7 +6,7 @@
     <a href="{{ item.grid.url }}" title="{{ alt }}">
       <div class="media-grid-item">
         {%- if item.grid.title or item.grid.subtext -%}
-        <div class="meta-text {{ item.type }}">
+        <div class="meta-text media-highlight {{ item.type }}">
             {% if item.grid.title %}
             <div class="header">{{ item.grid.title }}</div>
             {% endif %}

src/includes/media/watching/hero.liquid

@@ -1,6 +1,6 @@
 <a href="{{ movie.url }}">
   <div class="watching hero">
-    <div class="meta-text highlight-text">
+    <div class="meta-text media-highlight">
       <div class="header">{{ movie.title }}</div>
       <div class="subheader">
         {%- if movie.rating -%}