Place: Add @1x desktop illustration size, Optimize responsive

src/style/_base.scss

@@ -121,9 +121,12 @@ button {
         font-size: pxVW(180);
 
         @include breakpoint (sm) {
-            font-size: pxVW(160);
+            font-size: pxVW(130);
         }
         @include breakpoint (md) {
+            font-size: pxVW(160);
+        }
+        @include breakpoint (lg) {
             font-size: rem(160px);
         }
 
@@ -168,6 +171,7 @@ button {
 
 /* Text Styles
 ========================================================================== */
+// Location
 .style-location {
     font-family: $font-serif;
     font-size: 6vw;
@@ -191,12 +195,12 @@ button {
         }
     }
 
-
     .street {
         margin-bottom: 8px;
     }
 }
 
+// Information (capitalized text)
 .style-caps {
     font-family: $font-sans;
     font-size: rem(12px);
@@ -214,6 +218,7 @@ button {
     }
 }
 
+// Short text (description)
 .style-description {
     color: $color-tertiary;
     font-family: $font-sans-light;

src/style/atoms/_button-control.scss

@@ -210,6 +210,10 @@
         text-decoration: none;
 
         @include breakpoint (sm) {
+            width: 120px;
+            height: 120px;
+        }
+        @include breakpoint (lg) {
             width: 152px;
             height: 152px;
         }

src/style/organisms/_photos.scss

@@ -53,7 +53,6 @@
     .photo {
         position: relative;
         z-index: 4;
-        overflow: hidden;
     }
 
 
@@ -71,6 +70,7 @@
         // Photo
         .photo {
             padding-bottom: 80px;
+            overflow: hidden;
 
             @include breakpoint (sm) {
                 padding-bottom: 120px;

src/style/pages/_place.scss

@@ -22,7 +22,7 @@
         @include breakpoint (sm) {
             flex-direction: row;
             align-items: flex-end;
-            padding: pxVW(208) 0 pxVW(320);
+            padding: pxVW(240) 0 pxVW(288); // 528
             height: auto;
             max-height: none;
         }
@@ -165,9 +165,12 @@
         position: absolute;
         z-index: 0;
         top: 0;
-        left: 0;
+        left: 50%;
         width: 100%;
+        max-width: 1920px;
         height: 100%;
+        transform: translateX(-50%);
+        transform-origin: 0 0;
         background-image: var(--url-mobile);
         background-position: 0 0;
         background-repeat: no-repeat;
@@ -177,22 +180,9 @@
         @include breakpoint (sm) {
             background-image: var(--url-desktop);
         }
-
-        // Gradient on top
-        &:before {
-            content: "";
-            width: 100%;
-            height: 60vw;
-            display: block;
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            background: linear-gradient(180deg, rgba($color-primary, 0%) 0%, $color-primary 100%);
-
-            @include breakpoint (lg) {
-                height: 50%;
-                min-height: 600px;
-            }
+        @media (min-width: $screen-sm) and (-webkit-min-device-pixel-ratio: 2),
+            (min-width: $screen-sm) and (min-resolution: 192dpi) {
+            background-image: var(--url-desktop-2x);
         }
     }
 }