Apply anim-duration for card image too

And also media images in Catch-up

src/components/status.jsx

@@ -2593,6 +2593,12 @@ function Card({ card, selfReferential, instance }) {
                 e.target.style.display = 'none';
               } catch (e) {}
             }}
+            style={{
+              '--anim-duration':
+                width &&
+                height &&
+                `${Math.min(Math.max(Math.max(width, height) / 100, 5), 120)}s`,
+            }}
           />
         </div>
         <div class="meta-container">

src/pages/catchup.css

@@ -875,6 +875,7 @@
           position: relative;
           z-index: 1;
           animation: position-object 5s ease-in-out 5;
+          animation-duration: var(--anim-duration, 5s);
 
           /* @media (min-width: 40em) and (min-height: 600px) {
             transform: scale(3);

src/pages/catchup.jsx

@@ -1765,6 +1765,12 @@ function PostPeek({ post, filterInfo }) {
             ? mediaAttachments.map((m) => {
                 const mediaURL = m.previewUrl || m.url;
                 const remoteMediaURL = m.previewRemoteUrl || m.remoteUrl;
+                const width = m.meta?.original
+                  ? m.meta.original.width
+                  : m.meta?.small?.width || m.meta?.original?.width;
+                const height = m.meta?.original
+                  ? m.meta.original.height
+                  : m.meta?.small?.height || m.meta?.original?.height;
                 return (
                   <span key={m.id} class="post-peek-media">
                     {{
@@ -1782,6 +1788,12 @@ function PostPeek({ post, filterInfo }) {
                                 e.target.src = remoteMediaURL;
                               }
                             }}
+                            style={{
+                              '--anim-duration': `${Math.min(
+                                Math.max(Math.max(width, height) / 100, 5),
+                                120,
+                              )}s`,
+                            }}
                           />
                         ) : (
                           <span class="post-peek-faux-media">🖼</span>
@@ -1844,6 +1856,18 @@ function PostPeek({ post, filterInfo }) {
                         card.title || card.description || card.imageDescription
                       }
                       loading="lazy"
+                      style={{
+                        '--anim-duration':
+                          card.width &&
+                          card.height &&
+                          `${Math.min(
+                            Math.max(
+                              Math.max(card.width, card.height) / 100,
+                              5,
+                            ),
+                            120,
+                          )}s`,
+                      }}
                     />
                   ) : (
                     <span class="post-peek-faux-media">🔗</span>