👀 Rework how House index is displayed

Use grids to place the index instead of position absolute
Add a condition if the index starts with 1 as it has a quite smaller width

src/components/molecules/House.svelte

@@ -39,9 +39,7 @@
         </p>
     </div>
 
-    <div class="house__photo"
+    <div class="house__photo grid" class:not-landscape={ratio < 1.475}>
-        class:not-landscape={ratio < 1.475}
-    >
         <a href={url} sveltekit:noscroll tabindex="0">
             <figure class="house__image shadow-photo">
                 <Image
@@ -57,9 +55,9 @@
                     alt={photoAlt}
                 />
             </figure>
-            <span class="house__index title-index">
-                {index}
-            </span>
         </a>
+<span class="house__index title-index" class:has-one-start={index.startsWith('1')}>
+    {index}
+</span>
     </div>
 </div>

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

@@ -267,7 +267,7 @@
     </section>
 
     {#if photos.length}
-        <section class="location-page__houses grid" bind:this={photosListEl}>
+        <section class="location-page__houses" bind:this={photosListEl}>
             {#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index}
                 <House
                     {title}

src/style/molecules/_house.scss

@@ -1,19 +1,6 @@
 .house {
     position: relative;
 
-    @include bp (sm) {
-        --columns: 20;
-        grid-column-start: 3;
-    }
-
-    & > a {
-        display: block;
-        width: 100%;
-        height: 100%;
-        text-decoration: none;
-        cursor: zoom-in;
-    }
-
     // Information
     &__info {
         --delay: 0.2s;
@@ -26,7 +13,7 @@
             max-width: min(540px, 85vw);
         }
         @include bp (sm) {
-            grid-column: 4 / span 14;
+            grid-column: 6 / span 14;
             margin-bottom: 56px;
             padding: 0;
             max-width: 800px;
@@ -81,11 +68,23 @@
     // Photo
     &__photo {
         position: relative;
-        display: block;
+        grid-column: span var(--columns);
-        grid-column: 1 / span 17;
         opacity: 0;
         transition: opacity 2s var(--ease-quart);
 
+        & > a {
+            grid-column: span var(--columns);
+            width: 100%;
+            height: 100%;
+            text-decoration: none;
+            cursor: zoom-in;
+
+            @include bp (sm) {
+                grid-column: 3 / span 17;
+                grid-row: 1;
+            }
+        }
+
         :global(figure) {
             position: relative;
             z-index: 5;
@@ -143,7 +142,7 @@
             a:hover {
                 :global(img) {
                     opacity: 0.7;
-                    transform: scale3d(1.03, 1.03, 1.03) !important;
+                    transform: scale3d(1.03, 1.03, 1.03);
                     transition-duration: 1.2s;
                 }
             }
@@ -156,28 +155,44 @@
         z-index: 1;
         bottom: -64px;
         right: 20px;
+        display: block;
         text-align: right;
         pointer-events: none;
         user-select: none;
 
         @include bp (sm) {
-            left: 112.5%;
+            position: relative;
-            width: 400px;
+            grid-column: 19 / span 6;
-            top: 50%;
+            grid-row: 1;
+            white-space: nowrap;
             bottom: auto;
+            right: auto;
+            align-self: center;
+            background: none;
             text-align: left;
-            transform: translate3d(-50%, -50%, 0);
+        }
+
+        // Specific cases
+        &.has-one-start {
+            @include bp (sm) {
+                transform: translate3d(15%, 0, 0);
+            }
         }
     }
 
     // Even photos
     &:nth-child(even) {
         .house {
+            // Photo
             &__photo {
-                @include bp (sm) {
+                & > a {
-                    grid-column-start: 4;
+                    @include bp (sm) {
+                        grid-column: 6 / span 17;
+                        grid-row: 1;
+                    }
                 }
             }
+            // Info
             &__info {
                 @include bp (sm) {
                     margin-left: auto;
@@ -185,14 +200,17 @@
                 }
             }
             &__index {
-                left: auto;
-                right: 20px;
-
                 @include bp (sm) {
-                    right: auto;
+                    grid-column-start: 1;
-                    left: -12%;
                     text-align: right;
                 }
+
+                // Specific cases
+                &.has-one-start {
+                    @include bp (sm) {
+                        transform: translate3d(-8%, 0, 0);
+                    }
+                }
             }
         }
     }