Move passed-away class to global CSS

src/components/CatCard.astro

@@ -10,8 +10,9 @@ const { cat } = Astro.props;
 
 <a class="card-link-wrapper" href={`/cats/${cat.id}`}>
   <div class="card is-center">
-    <div class:list={['img-wrapper', { 'passed-away': cat.data.passedAway }]}>
+    <div class="img-wrapper">
       <img
+        class:list={[{ 'passed-away': cat.data.passedAway }]}
         src={cat.data.image.src}
         alt={cat.data.image.alt}
         loading="lazy"
@@ -74,10 +75,6 @@ const { cat } = Astro.props;
     object-fit: cover;
   }
 
-  .passed-away > img {
-    filter: grayscale(100%);
-  }
-
   .card span.rip {
     display: block;
     position: absolute;

src/styles/global.css

@@ -22,6 +22,10 @@ button:focus {
   outline: var(--color-primary) solid 3px;
 }
 
+img.passed-away {
+  filter: grayscale(100%);
+}
+
 @media screen and (min-width: 768px) and (max-width: 1024px) {
   .col-6-md {
     -webkit-box-flex: 0;