Fix weird nth-child global CSS compilation by using a conditional class

src/molecules/Photo.svelte

@@ -21,6 +21,7 @@
     const nameSplit = name.split(', ')
 
     // Photo index
+    const odd = index % 2 === 1
     const photoIndex = (index < 10 ? '0': '') + index
 
 
@@ -32,11 +33,11 @@
     })
 </script>
 
-<div class="photo" role="figure" aria-labelledby="photo-{index + 1}" bind:this={scope}>
+<div class="photo" class:photo--odd={odd} role="figure" aria-labelledby="photo-{index + 1}" bind:this={scope}>
     <div class="photo__location wrap">
         <div class="wrapper">
             <h2 class="title-location" id="photo-{index + 1}">
-                {#each nameSplit as line, i}
+                {#each nameSplit as _, i}
                 <span class="line">
                     <span>
                         {nameSplit[i]}{#if i < nameSplit.length - 1},{/if}

src/style/organisms/_photos.scss

@@ -194,7 +194,7 @@
             }
 
             // Every second (on column 2)
-            &:nth-child(2n+2) {
+            &--odd {
                 @include breakpoint (md) {
                     transform: translateY(-64px);
                 }