Detect media on About Process Step, Visual fixes

src/routes/about/+page.server.ts

@@ -42,11 +42,14 @@ export const load: PageServerLoad = async () => {
                 process_steps {
                     title
                     text
+                    media_type
                     image {
                         id
                         title
                         width, height
                     }
+                    video_mp4 { id }
+                    video_webm { id }
                 }
                 process_intention
 

src/routes/about/+page.svelte

@@ -19,6 +19,7 @@
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
     import Heading from '$components/molecules/Heading.svelte'
     import ProcessStep from '$components/molecules/ProcessStep.svelte'
+    import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
@@ -262,11 +263,19 @@
                 <p class="text-normal">{about.process_subtitle}</p>
             </div>
 
-            <div class="steps" bind:this={stepsEl}
+            <div class="steps grid" bind:this={stepsEl}
                 style:--cards-amount={about.process_steps.length}
             >
                 {#each about.process_steps as step, index}
-                    <ProcessStep {...step} index={index} />
+                    <ProcessStep
+                        {...step}
+                        index={index}
+                        image={step.image ?? undefined}
+                        video={step.video_mp4 && step.video_webm ? {
+                            mp4: step.video_mp4.id,
+                            webm: step.video_webm.id
+                        } : undefined}
+                    />
                 {/each}
             </div>