diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index 9bc1273..2372b89 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -24,7 +24,6 @@
     dayjs.extend(relativeTime)
 
     const { params } = $page
-    const hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
 
     let introEl: HTMLElement
     let photosListEl: HTMLElement
@@ -39,6 +38,7 @@
     $: latestPhoto = photos[0]
     $: currentPhotosAmount = photos.length
     $: ended = currentPhotosAmount === totalPhotos
+    $: hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
 
 
     /**
@@ -197,7 +197,7 @@
     out:fade={{ duration: DURATION.PAGE_OUT }}
 >
     <section class="location-page__intro grid" bind:this={introEl}>
-        <h1 class="title">
+        <h1 class="title" class:is-short={location.name.length <= 4}>
             <span class="housesof mask">
                 <strong class="word">Houses</strong>
                 <span class="of">of</span>
@@ -249,7 +249,7 @@
             </div>
         </div>
 
-        {#if location.illustration_mobile && location.illustration_desktop && location.illustration_desktop_2x}
+        {#if hasIllustration}
             <picture class="location-page__illustration" style="--parallax-y: {illustrationOffsetY}px;">
                 <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
                 <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss
index 473e5c1..872ef52 100644
--- a/src/style/pages/_location.scss
+++ b/src/style/pages/_location.scss
@@ -25,7 +25,7 @@
             line-height: 1;
             text-transform: uppercase;
             color: $color-lightpurple;
-            font-size: rem(52px);
+            font-size: clamp(48px, 12vw, 160px);
             text-align: center;
             margin: min(360px, 60vw) auto;
 
@@ -33,16 +33,14 @@
                 display: flex;
                 flex-flow: row wrap;
                 align-items: baseline;
-                justify-content: flex-start;
+                justify-content: center;
                 max-width: clamp(300px, 80vw, 1120px);
                 margin: 0 auto;
-                font-size: rem(56px);
-                text-align: left;
+                padding: 0;
             }
 
             strong {
                 display: block;
-                font-size: clamp(48px, 12vw, 160px);
                 color: $color-secondary;
                 font-weight: 300;
                 text-transform: none;
@@ -54,27 +52,28 @@
                 @include bp (sm) {
                     display: flex;
                     align-items: baseline;
+                    // margin-right: auto;
+                    // margin-left: -15vw;
                 }
 
                 span {
                     display: block;
-                    font-size: rem(24px);
+                    font-size: 0.35em;
                     margin-top: 8px;
 
                     @include bp (sm) {
                         display: inline;
-                        font-size: rem(56px);
                         margin: 0 24px;
                     }
                 }
             }
             .city {
                 text-align: center;
-                margin-left: auto;
 
-                @include bp (md) {
-                    margin-right: auto;
-                    padding-left: min(400px, 16vw);
+                @include bp (sm) {
+                    // margin-left: 15vw;
+                    // width: 80%;
+                    // padding-left: min(400px, 16vw);
                 }
             }
         }