Add some a11y to the mix

src/molecules/Location.svelte

@@ -6,7 +6,7 @@
     const { name, slug, country } = location
 </script>
 
-<div class="location">
+<div class="location" role="listitem">
     <a href="/location/{country.slug}/{slug}" rel="prefetch" sapper-noscroll>
         <img src={country.flag.full_url} alt="Flag of {country.name}">
         <div class="anim-mask mask-city">

src/molecules/Photo.svelte

@@ -33,10 +33,10 @@
     })
 </script>
 
-<div class="photo" bind:this={scope}>
+<div class="photo" role="figure" aria-labelledby="photo-{index + 1}" bind:this={scope}>
     <div class="photo__location wrap">
         <div class="wrapper">
-            <h2 class="title-location">
+            <h2 class="title-location" id="photo-{index + 1}">
                 {#each name.split(', ') as line, i}
                 <span class="line">
                     <span>{name.split(', ')[i]},</span>