diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss index 86d8dec..528b636 100644 --- a/src/style/pages/_location.scss +++ b/src/style/pages/_location.scss @@ -5,16 +5,26 @@ // Intro .location-page__intro { position: relative; - // height: 85vh; background: $color-primary; + @include bp (sm) { + padding-top: clamp(40px, 14vw, 320px); + } + @include bp (lg) { + padding-top: clamp(40px, 18vw, 320px); + } + // Houses Of Title .title { grid-column: 1 / span var(--columns); position: relative; z-index: 2; - max-width: 1164px; - margin: clamp(80px, 10vw, 240px) auto clamp(60px, 6vw, 120px); + display: flex; + flex-flow: row wrap; + align-items: baseline; + justify-content: flex-start; + max-width: clamp(300px, 80vw, 1120px); + margin: 0 auto; padding: 0 32px; font-family: $font-serif; line-height: 1; @@ -24,7 +34,7 @@ strong { display: block; - font-size: clamp(48px, 16vw, 160px); + font-size: clamp(48px, 12vw, 160px); color: $color-secondary; font-weight: 300; text-transform: none; @@ -34,49 +44,25 @@ grid-column: span var(--columns); display: flex; align-items: baseline; - // margin-left: -10vw; span { - margin-left: 24px; + margin: 0 24px; } } .city { - grid-row: 2; - // grid-column: 4 / span 13; text-align: center; + margin-left: auto; } } } - // Illustration - &__illustration { - pointer-events: none; - position: absolute; - z-index: 1; - top: 0; - left: 50%; - width: clamp(320px, 100vw, 1920px); - height: 100%; - background: 0 0 var(--illus-mobile) no-repeat; - background-size: 100% auto; - transform: translate3d(-50%, 0, 0); - - - @include bp (sm) { - background-image: var(--illus-desktop); - } - @include bp (xl) { - background-image: var(--illus-desktop-2x); - } - } - // Description &__description { --columns: 19; grid-column: 6 / span 19; position: relative; z-index: 2; - margin-bottom: calc(-1 * clamp(60px, 6vw, 120px)); + margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px)); background-color: $color-tertiary; color: $color-text; border-radius: 8px 0 0 8px; @@ -115,6 +101,28 @@ } } + // Illustration + &__illustration { + pointer-events: none; + position: absolute; + z-index: 1; + top: 0; + left: 50%; + width: clamp(320px, 100vw, 1920px); + height: 100%; + background: 0 0 var(--illus-mobile) no-repeat; + background-size: 100% auto; + transform: translate3d(-50%, 0, 0); + + + @include bp (sm) { + background-image: var(--illus-desktop); + } + @include bp (xl) { + background-image: var(--illus-desktop-2x); + } + } + // Houses &__houses { background-color: #fff;