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/style/_base.scss

@@ -2,6 +2,7 @@ html {
     font: #{$base-font-size} $font-sans;
     color: $color-text;
     min-width: 320px;
+    overflow-x: hidden;
 }
 body {
     @include font-smooth;
@@ -80,7 +81,7 @@ button {
 // Title: Locations
 .title-location {
     font-family: $font-serif;
-    font-size: rem(68px);
+    font-size: rem(48px);
     line-height: 1;
     color: $color-secondary;
     text-align: center;
@@ -165,7 +166,7 @@ button {
     font-family: $font-serif;
     font-size: rem(24px);
     color: #fff;
-    line-height: 1;
+    line-height: 1.15;
     text-align: center;
 
     a {

src/style/layouts/_main.scss

@@ -1,6 +1,5 @@
 // Main page
 .housesof {
-    overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;

src/style/molecules/_location.scss

@@ -36,7 +36,7 @@
         font-size: rem(32px);
         color: $color-secondary;
 
-        @include breakpoint (sm) {
+        @include breakpoint (md) {
             font-size: rem(48px);
         }
     }
@@ -44,7 +44,7 @@
             height: 40px;
             margin: 24px 0 16px;
 
-            @include breakpoint (sm) {
+            @include breakpoint (md) {
                 height: 64px;
                 margin-bottom: 24px;
             }

src/style/organisms/_carousel.scss

@@ -210,13 +210,12 @@
     */
     &__infos {
         position: relative;
-        z-index: 3;
+        z-index: 2;
     }
 
     // Locations
     &__locations {
         position: relative;
-        overflow: hidden;
         min-height: 80px;
 
         @include breakpoint (sm) {
@@ -236,6 +235,7 @@
         transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
         will-change: transform, opacity;
         margin-top: 32px;
+        padding-bottom: 4px;
 
         @include breakpoint (sm) {
             margin-top: pxVW(80);
@@ -268,6 +268,8 @@
     */
     &__dots {
         display: none;
+        position: relative;
+        z-index: 3;
 
         @include breakpoint (xs) {
             display: flex;

src/style/organisms/_fullscreen.scss

@@ -15,6 +15,7 @@
         overflow-x: auto;
         opacity: 0;
         transform: scale(1.1);
+        background: $color-primary;
         transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
         will-change: transform, opacity;
 
@@ -24,6 +25,7 @@
             display: block;
             height: 100%;
             width: auto;
+            margin: 0 auto;
         }
 
         // Open

src/style/organisms/_locations.scss

@@ -39,20 +39,24 @@
 
     // Locations
     &__locations {
-        min-height: 200px;
+        min-height: 120px;
         margin-top: 72px;
 
         @include breakpoint (sm) {
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
-            margin-bottom: pxVW(232);
+            min-height: 200px;
             margin-top: 112px;
+            margin-bottom: pxVW(120);
             // display: grid;
             // grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             // grid-column-gap: 120px;
             // grid-row-gap: pxVW(120);
         }
+        @include breakpoint (md) {
+            margin-bottom: pxVW(232);
+        }
         @include breakpoint (xl) {
             margin-bottom: 232px;
         }

src/style/organisms/_photos.scss

@@ -45,7 +45,7 @@
                 position: sticky;
                 z-index: 10;
                 top: 32px;
-                height: 100%;
+                width: 100%;
             }
         }
 

src/style/pages/_homepage.scss

@@ -1,6 +1,7 @@
 // Introduction
 .intro {
     background-color: $color-tertiary;
+    overflow: hidden;
 
     // Title
     .title-parallax {