Wire homepage hero to featured thumbnail family; add featured-picture component

resources/views/web/home/hero.blade.php

@@ -1,9 +1,7 @@
 @php
     $heroArtwork = $artwork ?? null;
     $fallbackImage = 'https://files.skinbase.org/default/missing_lg.webp';
-    $heroImage = $heroArtwork['thumb_lg'] ?? $heroArtwork['thumb'] ?? $fallbackImage;
-    $heroImageSrcset = $heroArtwork['thumb_srcset'] ?? null;
-    $heroImageSizes = '100vw';
+    $heroFeaturedImage = $heroArtwork['featured_image'] ?? null;
 @endphp
 
 @if (!$heroArtwork)
@@ -23,17 +21,19 @@
     </section>
 @else
     <section class="group relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
-        <picture>
-            <img
-                src="{{ $heroImage }}"
-                @if($heroImageSrcset) srcset="{{ $heroImageSrcset }}" sizes="{{ $heroImageSizes }}" @endif
-                alt="{{ $heroArtwork['title'] ?? 'Featured artwork' }}"
-                class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
-                fetchpriority="high"
-                loading="eager"
-                decoding="sync"
-            />
-        </picture>
+        <x-artwork.featured-picture
+            :image="$heroFeaturedImage ?? [
+                'alt' => $heroArtwork['title'] ?? 'Featured artwork',
+                'img_src' => $heroArtwork['thumb_lg'] ?? $heroArtwork['thumb'] ?? $fallbackImage,
+                'img_srcset' => $heroArtwork['thumb_srcset'] ?? null,
+                'img_sizes' => '100vw',
+                'sources' => [],
+            ]"
+            class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
+            fetchpriority="high"
+            loading="eager"
+            decoding="async"
+        />
 
         <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/55 to-transparent"></div>