Bring the image position magic to the banner too

src/components/account.css

@@ -3,7 +3,7 @@
 }
 
 #account-container .header-banner {
-  pointer-events: none;
+  /* pointer-events: none; */
   aspect-ratio: 6 / 1;
   width: 100%;
   height: auto;
@@ -30,6 +30,9 @@
   );
   margin-bottom: -44px;
 }
+#account-container .header-banner:hover {
+  animation: position-object 5s ease-in-out 1s 5;
+}
 
 @media (min-height: 480px) {
   #account-container .header-banner {

src/components/status.css

@@ -426,20 +426,6 @@
 .status .media {
   cursor: pointer;
 }
-@keyframes position-object {
-  0% {
-    object-position: 50% 50%;
-  }
-  25% {
-    object-position: 0% 0%;
-  }
-  75% {
-    object-position: 100% 100%;
-  }
-  100% {
-    object-position: 50% 50%;
-  }
-}
 .status .media img:is(:hover, :focus),
 a:focus-visible .status .media img {
   animation: position-object 5s ease-in-out 1s 5;

src/index.css

@@ -354,3 +354,18 @@ code {
     transform: translateY(0);
   }
 }
+
+@keyframes position-object {
+  0% {
+    object-position: 50% 50%;
+  }
+  25% {
+    object-position: 0% 0%;
+  }
+  75% {
+    object-position: 100% 100%;
+  }
+  100% {
+    object-position: 50% 50%;
+  }
+}