Fix bubble position

app/assets/stylesheets/bubble.css

@@ -52,24 +52,4 @@
     position: absolute;
     text-align: center;
   }
-
-  .bubble--doing,
-  .bubble--on_deck {
-    inset-inline-start: 100%;
-    translate: -60% -60%;
-
-    .card-perma__bg & {
-      --bubble-number-max: 42px;
-      --bubble-size: 6rem;
-
-      inset: calc(var(--bubble-size) / -4) calc(var(--bubble-size) / 1.5) auto auto;
-      translate: 0 0 !important;
-
-      @media (max-width: 800px) {
-        --bubble-size: 4.5rem;
-
-        inset: calc(var(--bubble-size) / 1.5) 0 auto auto;
-      }
-    }
-  }
 }

app/assets/stylesheets/card-columns.css

@@ -329,6 +329,11 @@
       }
     }
 
+    .bubble {
+      inset-inline-start: 100%;
+      translate: -60% -60%;
+    }
+
     @media (any-hover: hover) {
       .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) {
         filter: blur(3px) brightness(1.2);

app/assets/stylesheets/card-perma.css

@@ -91,6 +91,20 @@
       }
     }
 
+    .bubble {
+      --bubble-number-max: 42px;
+      --bubble-size: 6rem;
+
+      inset: calc(var(--bubble-size) / -4) calc(var(--bubble-size) / 1.5) auto auto;
+      translate: 0 0;
+
+      @media (max-width: 800px) {
+        --bubble-size: 4.5rem;
+
+        inset: calc(var(--bubble-size) / 1.5) 0 auto auto;
+      }
+    }
+
     @media (max-width: 800px) {
       --padding-inline: var(--main-padding);