Use Svelte shorthand for CSS variables declaration

src/components/SplitText.svelte

@@ -16,7 +16,7 @@
             {#each Array(2) as _, index}
                 <span class="text-split__line" aria-hidden={index === 1}>
                     {#each split as word, i}
-                        <span class="word" style="--i-w: {i};">{word}</span>{#if word.includes('\n')}<br>{/if}
+                        <span class="word" style:--i-w={i}>{word}</span>{#if word.includes('\n')}<br>{/if}
                         <!-- svelte-ignore empty-block -->
                         {#if i < split.length - 1}{/if}
                     {/each}
@@ -36,7 +36,7 @@
 {:else}
     <span class={classes}>
         {#each split as char, i}
-            <span class="char" style="--i-c: {i};">{char}</span>
+            <span class="char" style:--i-c={i}>{char}</span>
         {/each}
     </span>
 {/if}

src/components/atoms/ScrollingTitle.svelte

@@ -67,7 +67,7 @@
 <svelte:element this={tag}
     bind:this={titleEl}
     class={classes} aria-label={label}
-    style="--parallax-x: {parallax}%;"
+    style--parallax-x="{parallax}%"
     use:reveal={revealOptions}
 >
     <slot />

src/components/molecules/Location.svelte

@@ -61,7 +61,9 @@
 </script>
 
 <div class="location" bind:this={locationEl}
-    style="--offset-x: {$offset.x}px; --offset-y: {$offset.y}px; --rotate: {$offset.x * 0.125}deg"
+    style:--offset-x="{$offset.x}px"
+    style:--offset-y="{$offset.y}px"
+    style:--rotate="{$offset.x * 0.125}deg"
 >
     <a href="/{location.country.slug}/{location.slug}"
         on:mousemove={handleMouseMove}

src/components/organisms/Carousel.svelte

@@ -118,7 +118,8 @@
         </ul>
 
         <span class="carousel__arrow" bind:this={arrowEl}
-            style="--x: {$arrowPosition.x}px; --y: {$arrowPosition.y}px;"
+            style:--x="{$arrowPosition.x}px"
+            style:--y="{$arrowPosition.y}px"
             class:is-flipped={arrowDirection === 'prev' && !isFirstSlide || isLastSlide}
         >
             <svg width="29" height="32">

src/routes/[country]/[location]/index.svelte

@@ -257,7 +257,7 @@
         </div>
 
         {#if hasIllustration}
-            <picture class="location-page__illustration" style="--parallax-y: {illustrationOffsetY}px;">
+            <picture class="location-page__illustration" style:--parallax-y="{illustrationOffsetY}px">
                 <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
                 <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
                 <img

src/routes/photos.svelte

@@ -427,7 +427,7 @@
         </div>
     </section>
 
-    <section class="photos-page__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
+    <section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px">
         <div class="grid container">
             {#if photos}
                 <div class="photos-page__grid" bind:this={photosGridEl}>