Photo: Tweak reveal animations and fix horizontal scroll

- Photo number doesn't jumps anymore (now reveals based on photo not the number)
- Properly reveal title locations lines
- Optimize code

src/style/molecules/_photo.scss

@@ -15,13 +15,18 @@
 
         h2 {
             text-align: left;
-            overflow: hidden;
 
             @include breakpoint (xs) {
                 font-size: rem(40px);
             }
+        }
+        .line {
+            overflow: hidden;
+            padding-bottom: 3px;
+            display: block;
 
             span {
+                position: relative;
                 display: block;
                 will-change: transform;
             }
@@ -29,6 +34,7 @@
         p {
             color: $color-lightgray;
             margin-top: 16px;
+            will-change: opacity;
         }
     }
 
@@ -143,6 +149,7 @@
         user-select: none;
 
         span {
+            position: relative;
             display: block;
             will-change: transform;
         }

src/style/organisms/_photos.scss

@@ -53,15 +53,10 @@
     .photo {
         position: relative;
         z-index: 4;
-        margin-bottom: 88px;
-
-        @include breakpoint (sm) {
-            margin-bottom: 120px;
-        }
 
         // Last photo doesn't need spacing
         &:last-child {
-            margin-bottom: 0;
+            padding-bottom: 0;
         }
     }
 
@@ -79,6 +74,12 @@
 
         // Photo
         .photo {
+            padding-bottom: 80px;
+
+            @include breakpoint (sm) {
+                padding-bottom: 120px;
+            }
+
             // Even photos
             &:nth-child(even) {
                 @include breakpoint (sm) {