From ba5d1de7804c7b9f815b766e62bc3839d179d8a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 11 Mar 2020 19:23:56 +0100
Subject: [PATCH] Place: Fix title alignments and margins

---
 src/routes/location/[country]/[place].svelte |  2 +-
 src/style/pages/_place.scss                  | 17 +++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/routes/location/[country]/[place].svelte b/src/routes/location/[country]/[place].svelte
index b7205f9..cacc45b 100644
--- a/src/routes/location/[country]/[place].svelte
+++ b/src/routes/location/[country]/[place].svelte
@@ -103,7 +103,7 @@
 <section class="place">
     <div class="place__title">
         <h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
-            <span class="place__top anim-mask">
+            <span class="place__title_top anim-mask">
                 <span class="place__title_houses">Houses</span>
                 <em class="place__title_of">of</em>
             </span>
diff --git a/src/style/pages/_place.scss b/src/style/pages/_place.scss
index 2f9fa6d..d801f65 100644
--- a/src/style/pages/_place.scss
+++ b/src/style/pages/_place.scss
@@ -30,6 +30,7 @@
         }
 
         h1 {
+            --offset: #{pxVW(72)};
             position: relative;
             z-index: 2;
             text-align: center;
@@ -39,17 +40,21 @@
             .anim-translate {
                 display: inline-block;
             }
-        }
-
-        &_bottom {
-            text-align: right;
-            margin-left: pxVW(128);
 
             @include breakpoint (xl) {
-                margin-left: 128px;
+                --offset: 72px;
             }
         }
 
+        &_top {
+            margin-left: calc(-1 * var(--offset));
+            text-align: left;
+        }
+        &_bottom {
+            text-align: right;
+            margin-left: var(--offset);
+        }
+
         // Switcher button
         .button-control {
             z-index: 1;