refactor: unify artwork card rendering

resources/js/components/artwork/ArtworkRelated.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-const FALLBACK_MD = 'https://files.skinbase.org/default/missing_md.webp'
+import ArtworkGalleryGrid from './ArtworkGalleryGrid'
 
 export default function ArtworkRelated({ related }) {
   if (!Array.isArray(related) || related.length === 0) return null
@@ -9,36 +8,11 @@ export default function ArtworkRelated({ related }) {
     <section className="mt-12">
       <h2 className="text-lg font-semibold text-white">Related Artworks</h2>
 
-      <div className="mt-5 flex snap-x snap-mandatory gap-4 overflow-x-auto pb-2 lg:grid lg:grid-cols-4 lg:gap-5 lg:overflow-visible">
-        {related.slice(0, 12).map((item) => (
-          <article
-            key={item.id}
-            className="group min-w-[75%] snap-start overflow-hidden rounded-xl border border-nova-700 bg-panel transition lg:min-w-0 lg:hover:border-nova-500"
-          >
-            <a href={item.url} className="block">
-              <div className="relative aspect-video bg-deep">
-                <img
-                  src={item.thumb || FALLBACK_MD}
-                  srcSet={item.thumb_srcset || undefined}
-                  sizes="(min-width: 1024px) 25vw, 75vw"
-                  alt={item.title || 'Artwork'}
-                  className="h-full w-full object-cover transition duration-300 lg:group-hover:scale-[1.03]"
-                  loading="lazy"
-                  decoding="async"
-                  onError={(event) => {
-                    event.currentTarget.src = FALLBACK_MD
-                  }}
-                />
-                <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-deep/25 to-transparent lg:opacity-0 lg:transition lg:duration-300 lg:group-hover:opacity-100" />
-              </div>
-              <div className="p-3">
-                <h3 className="truncate text-sm font-semibold text-white">{item.title}</h3>
-                <p className="truncate text-xs text-soft">by {item.author || 'Artist'}</p>
-              </div>
-            </a>
-          </article>
-        ))}
-      </div>
+      <ArtworkGalleryGrid
+        items={related.slice(0, 8)}
+        compact
+        className="mt-5 xl:grid-cols-4"
+      />
     </section>
   )
 }