Indicate that panquia is on fire

components/ServiceCard.vue

@@ -4,13 +4,17 @@ const props = defineProps<{
   href: string;
   img: string;
   unclickable?: boolean;
+  broken?: boolean;
 }>();
 
 const imgUrl = `/images/services/${props.img}`;
 </script>
 
 <template>
-  <a :href="unclickable ? '' : href" :class="['no-underline', { unclickable }]">
+  <a
+    :href="unclickable ? '' : href"
+    :class="['no-underline', { unclickable: unclickable || broken, broken }]"
+  >
     <div class="card flex flex-col items-center justify-around">
       <img class="m-0" :src="imgUrl" />
       <h3 class="m-0">{{ props.name }}</h3>
@@ -36,6 +40,26 @@ img {
   box-shadow: 0 0.1rem 0.5rem 0 gray;
 }
 
+a.broken::before {
+  content: "PANQUIA IS ON FIRE";
+  position: absolute;
+  color: red;
+  transform: rotate(-45deg);
+  font-size: 1.5rem;
+  text-align: center;
+  z-index: 2;
+  top: 40%;
+  left: -12.5%;
+  width: 125%;
+  font-family: "Roboto", sans-serif;
+  font-weight: bold;
+}
+
+a.broken > .card {
+  filter: grayscale(100%);
+  opacity: 0.4;
+}
+
 html.dark .card {
   border: 0.2rem solid rgb(126, 93, 98);
   background: rgb(110, 90, 92);