Fix some responsive and style

- Fullscreen: center image + add a background color
- Carousel: don't cut informations
- Title location font size
- Style location line height
- Photo reveal effect
- Photo has now a transparent png

src/animations/Photo.js

@@ -24,26 +24,33 @@ export const animateIn = scope => {
         }
     })
 
+
     // Photo (reveal on scroll)
-    imagesLoaded(scope.querySelector('.photo__image'), instance => {
-        const image = instance.elements[0]
+    const photoImage = scope.querySelector('.photo__image')
+    const photoAnim = anime.timeline({
+        easing: 'easeOutQuart',
+        duration: 2000,
+        autoplay: false
+    })
+    photoAnim.add({
+        targets: scope.querySelector('.photo__picture'),
+        opacity: [0, 1]
+    }, 50)
+    photoAnim.add({
+        targets: scope.querySelector('.photo__picture img'),
+        scale: [1.12, 1]
+    }, 50)
+
+    // Show photo when image is loaded
+    imagesLoaded(photoImage, instance => {
         const photoReveal = ScrollOut({
             once: true,
-            targets: image,
-            onShown (el) {
-                // Load the photo then reveal it
-                anime({
-                    targets: el.querySelector('img'),
-                    scale: [1.12, 1],
-                    opacity: [0, 1],
-                    easing: 'easeOutQuart',
-                    duration: 2000,
-                    delay: 50
-                })
-            }
+            targets: photoImage,
+            onShown: el => photoAnim.restart()
         })
     })
 
+
     // Number parallax on scroll
     const nbParallaxMedia = window.matchMedia('(min-width: 768px)')
     const nbParallax = matchMedia => {