diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index a20208c..aecbbd6 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -13,5 +13,6 @@
{name}
+ {country.name}
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 8dbd534..abaa54a 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -8,7 +8,7 @@
export let photos: any
- const globalData: any = getContext('global')
+ const { location, count }: any = getContext('global')
+ Discover {count.photos} homes from {count.locations} cities of {count.countries} countries
diff --git a/src/style/_typography.scss b/src/style/_typography.scss
index 5d7e7c8..6544e95 100644
--- a/src/style/_typography.scss
+++ b/src/style/_typography.scss
@@ -8,6 +8,7 @@
letter-spacing: -0.04em;
}
+
// Texts
.text-medium {
font-size: rem(28px);
@@ -21,4 +22,12 @@
font-family: $font-sans;
font-weight: 400;
line-height: 1.5;
-}
\ No newline at end of file
+}
+
+.text-label {
+ font-size: rem(12px);
+ line-height: 1.4;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss
new file mode 100644
index 0000000..53b8351
--- /dev/null
+++ b/src/style/molecules/_location.scss
@@ -0,0 +1,23 @@
+.location {
+ text-align: center;
+ // Flag
+ img {
+ border-radius: 100%;
+ }
+ // Link
+ a {
+ text-decoration: none;
+ }
+ &__name {
+ display: block;
+ color: $color-secondary;
+ margin: 20px 0 -2px;
+ font-size: rem(48px);
+ font-family: $font-serif;
+ font-weight: 300;
+ line-height: 1.2;
+ }
+ span {
+ color: $color-tertiary;
+ }
+}
\ No newline at end of file
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
new file mode 100644
index 0000000..cc02939
--- /dev/null
+++ b/src/style/organisms/_locations.scss
@@ -0,0 +1,19 @@
+.browse {
+
+ &__description {
+ text-align: center;
+ }
+
+ &__locations {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: center;
+ max-width: 1200px;
+ margin: 128px auto 80px;
+ justify-items: center;
+
+ .location {
+ margin: 0 40px 80px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index 62d1a34..76f6290 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -27,9 +27,10 @@
// Molecules
@import "molecules/photo-card";
+@import "molecules/location";
// Organisms
-// @import "organisms/organism";
+@import "organisms/locations";
// Pages