Place: Add photo Transition In, Add Illustration system, Visual fixes

- Add a transition in on each photo component (scale down + fade in), TODO: Parallax on number
- Illustration takes two images and changes the source depending on the viewport size

src/style/molecules/_photo.scss

@@ -15,11 +15,15 @@
 
         h2 {
             text-align: left;
-            white-space: pre-line;
+            overflow: hidden;
 
             @include breakpoint (xs) {
                 font-size: rem(40px);
             }
+
+            span {
+                display: block;
+            }
         }
         p {
             color: $color-lightgray;

src/style/organisms/_photos.scss

@@ -1,6 +1,7 @@
 .photos {
     position: relative;
     margin-top: -22px;
+    overflow-x: hidden;
     background-color: #fff;
 
     @include breakpoint (sm) {
@@ -107,7 +108,6 @@
             // Number
             &__number {
                 @include breakpoint (sm) {
-                    transform: translate(-50%, var(--translate));
                     will-change: transform;
                 }
             }

src/style/pages/_place.scss

@@ -1,22 +1,28 @@
 // Place section
 .place {
     position: relative;
-    background-position: 50% 0;
-    background-size: 100%;
-    background-repeat: no-repeat;
     overflow-x: hidden;
 
     // Title
     &__title {
         position: relative;
         z-index: 2;
-        padding: pxVW(400) 0 pxVW(400);
         display: flex;
+        flex-direction: column;
         justify-content: center;
-        align-items: flex-end;
+        align-items: center;
+        padding: pxVW(350) 0 pxVW(200);
+        text-align: center;
 
+        @media screen and (orientation: portrait) and (max-width: $screen-xs) {
+            height: 144vw;
+            padding: 0;
+        }
         @include breakpoint (sm) {
-            padding: pxVW(224) 0 pxVW(240);
+            flex-direction: row;
+            align-items: flex-end;
+            padding: pxVW(208) 0 pxVW(320);
+            height: auto;
         }
         @include breakpoint (xxl) {
             padding-top: 240px;
@@ -26,7 +32,8 @@
         h1 {
             position: relative;
             z-index: 2;
-            text-align: left;
+            text-align: center;
+            display: inline-block;
             pointer-events: none;
 
             .anim-translate {
@@ -37,16 +44,22 @@
         &_bottom {
             text-align: right;
             margin-left: pxVW(128);
+
+            @include breakpoint (xl) {
+                margin-left: 128px;
+            }
         }
 
         // Switcher button
-        .button-control--dashed {
+        .button-control {
             z-index: 1;
+            margin: 32px auto 0;
             flex-shrink: 0;
-            margin-left: -12px;
 
             @include breakpoint (sm) {
                 margin-left: -24px;
+                margin-right: 0;
+                margin-top: 0;
             }
         }
     }
@@ -146,7 +159,13 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background: url(/img/illustration.png) 0 0 no-repeat;
+        background-image: var(--url-mobile);
+        background-position: 0 0;
+        background-repeat: no-repeat;
         background-size: 100% auto;
+
+        @include breakpoint (sm) {
+            background-image: var(--url-desktop);
+        }
     }
 }