Add dynamic photo's index on Location page

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

@@ -143,7 +143,7 @@
     </section>
 
     <section class="location-page__houses grid">
-        {#each photos as { title, image: { id, title: alt }, slug, date_taken }}
+        {#each photos as { title, image: { id, title: alt }, slug, date_taken }, index}
             <div class="house grid">
                 <div class="house__info">
                     <a href="/{params.country}/{params.location}/{slug}">
@@ -163,7 +163,9 @@
                         height={853}
                         class="shadow-photo"
                     />
-                    <span class="house__index title-index">22</span>
+                    <span class="house__index title-index">
+                        {(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
+                    </span>
                 </a>
             </div>
         {/each}

src/style/organisms/_house.scss

@@ -42,10 +42,34 @@
 
     // Photo number
     &__index {
+        @include bp (sm) {
             position: absolute;
-        right: -250px;
-        top: 50%;
-        transform: translateY(-50%);
             z-index: 1;
+            left: 112.5%;
+            width: 400px;
+            top: 50%;
+            text-align: left;
+            transform: translate3d(-50%, -50%, 0);
+        }
+    }
+
+    // Even photos
+    &:nth-child(even) {
+        .house {
+            &__photo {
+                grid-column-start: 4;
+            }
+            &__info {
+                margin-left: auto;
+                text-align: right;
+            }
+            &__index {
+                @include bp (sm) {
+                    right: auto;
+                    left: -12%;
+                    text-align: right;
+                }
+            }
+        }
     }
 }

src/style/pages/_location.scss

@@ -126,22 +126,6 @@
         &:not(:last-child) {
             margin-bottom: 120px;
         }
-
-        &:nth-child(even) {
-            .house {
-                &__photo {
-                    grid-column-start: 4;
-                }
-                &__info {
-                    margin-left: auto;
-                    text-align: right;
-                }
-                &__index {
-                    right: auto;
-                    left: -250px;
-                }
-            }
-        }
     }
 
     // Next photos section
@@ -190,7 +174,7 @@
                     margin: 0 -10px;
                 }
             }
-            & > p {
+            p {
                 display: block;
                 margin: 16px auto 0;
                 text-align: center;