Show message when no photos are available on Location

src/routes/[country]/[location]/index.svelte

@@ -145,6 +145,7 @@
         <div class="location-page__illustration" />
     </section>
 
+    {#if photos.length}
         <section class="location-page__houses grid">
             {#each photos as { title, image: { id, title: alt }, slug, date_taken }, index}
                 <div class="house grid">
@@ -195,6 +196,14 @@
                 {/if}
             </div>
         </section>
+    {:else}
+        <div class="location-page__message">
+            <p>
+                No photos available for {data.name}.<br>
+                Come back later!
+            </p>
+        </div>
+    {/if}
 </main>
 
 

src/style/pages/_location.scss

@@ -202,4 +202,18 @@
                 cursor: not-allowed;
             }
         }
+
+    // Message
+    &__message {
+        padding: clamp(96px, 24vw, 360px) 0 clamp(96px, 16vw, 280px);
+        text-align: center;
+        color: $color-text;
+        font-size: rem(24px);
+        font-weight: 200;
+        line-height: 1.4;
+
+        @include bp (sm) {
+            font-size: rem(28px);
+        }
+    }
 }