Change max sides margin depending on window width when scrolling

Running it on window scroll avoids a flash effect on and is more optimized as it is not ran every time scrollY changes

src/routes/photos.svelte

@@ -7,8 +7,8 @@
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
-    import { map, lerp } from '$utils/functions'
     import { getAssetUrlKey } from '$utils/helpers'
+    import { map, lerp, throttle } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -50,14 +50,21 @@
     $: currentPhotosAmount = photos.length
     $: ended = currentPhotosAmount === totalPhotos
 
-    // Container margins
+
+    /**
+     * Container margins
+     */
     let scrollProgress: number
-    let sideMargins: number = 8
-    $: if (browser && window.innerWidth >= 768) {
-        const viewportScroll = innerHeight / innerWidth <= 0.6 ? innerHeight * 1.5 : innerHeight
+    let sideMargins: number = innerWidth < 1200 ? 16 : 8
+    $: viewportScroll = (innerHeight / innerWidth) <= 0.6 ? innerHeight * 1.5 : innerHeight
+
+    // Define sides margin on scroll
+    const setSidesMargin = throttle(() => {
+        if (window.innerWidth >= 992) {
             scrollProgress = map(scrollY, 0, viewportScroll, 0, 1, true)
-        sideMargins = lerp(8, 30, scrollProgress)
+            sideMargins = lerp(innerWidth < 1200 ? 16 : 8, 30, scrollProgress)
         }
+    }, 50)
 
 
     /**
@@ -186,7 +193,10 @@
     image=""
 />
 
-<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
+<svelte:window
+    bind:scrollY bind:innerWidth bind:innerHeight
+    on:scroll={setSidesMargin}
+/>
 
 
 <main class="photos">