Detect media on About Process Step, Visual fixes

src/components/molecules/ProcessStep.svelte

@@ -5,29 +5,42 @@
 <script lang="ts">
     // Components
     import Image from '$components/atoms/Image.svelte'
+    import { getAssetUrlKey } from '$utils/api'
 
     export let index: number
     export let title: string
     export let text: string
     export let image: any = undefined
+    export let video: any = undefined
 
     const imageRatio = image ? image.width / image.height : undefined
 </script>
 
 <div class="step" style:--index={index}>
     <div class="step__card grid">
-        {#if image}
-            <Image
-                class="image shadow-box-dark"
-                id={image.id}
-                sizeKey="photo-grid"
-                sizes={{
-                    small: { width: 400 },
-                    medium: { width: 600 },
-                }}
-                ratio={imageRatio}
-                alt={image.title}
-            />
+        {#if image || video}
+        <div class="media">
+            {#if image}
+                <Image
+                    class="image shadow-box-dark"
+                    id={image.id}
+                    sizeKey="product"
+                    sizes={{
+                        small: { width: 400 },
+                        medium: { width: 600 },
+                        large: { width: 800 },
+                    }}
+                    ratio={imageRatio}
+                    alt={image.title}
+                />
+            {:else if video}
+                <video autoplay muted loop playsinline allow="autoplay">
+                    <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
+                    <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
+                    <track kind="captions" />
+                </video>
+            {/if}
+        </div>
         {/if}
 
         <div class="content">