Edit browse locations section

Create badge atom,

src/components/atoms/Badge.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    export let text: string
+    export let size: string = 'small'
+</script>
+
+<div class="badge badge--{size}">
+    <span>{text}</span>
+</div>

src/components/molecules/Location.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     // Components
     import Image from '$components/atoms/Image.svelte'
+    import Badge from '$components/atoms/Badge.svelte'
 
     export let location: any
+    export let index: number
 
     const { name, slug, country, last_updated } = location
 </script>
@@ -13,6 +15,9 @@
         <h3 class="location__name">
             {name}
         </h3>
-        <span class="text-label">{country.name}</span>
+        <span class="text-label location__country">{country.name}</span>
+        {#if index < 2}
+            <Badge text="New" />
+        {/if}
     </a>
 </div>

src/components/organisms/Locations.svelte

@@ -14,13 +14,15 @@
     <ul class="browse__continents" id="continents">
         <li>
             <Button tag="button" text="All" class="button-outline" />
+            <Button tag="button" text="Europe" class="button-outline" />
         </li>
     </ul>
 
     <div class="browse__locations" id="locations_list" role="list">
-        {#each locations as location (location.slug)}
+        {#each locations as location, index}
             <Location
                 location={location}
+                index={index}
             />
         {/each}
     </div>