Create photo grid for photos page

with control bar

src/routes/photos.svelte

@@ -10,6 +10,8 @@
     import Locations from '$components/organisms/Locations.svelte'
     import Shop from '$components/organisms/Shop.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
+    import Image from '$components/atoms/Image.svelte';
+    import PostCard from '$components/molecules/PostCard.svelte';
 
     export let photos: any
 
@@ -66,6 +68,31 @@
             </div>
         </div>
     </section>
+
+    <section class="photos__content">
+        <div class="grid container">
+            <div class="photos__grid">
+                {#each Array(21) as _}
+                    <div class="photo shadow-photo">
+                        <a href="/country/location/photo-slug">
+                            <Image id="5a45ba18-7b78-48e0-a299-302b1ea9b77b" width={1200} height={800} alt="image" />
+                            <PostCard />
+                        </a>
+                    </div>
+                {/each}
+            </div>
+
+            <div class="controls grid">
+                <p class="controls__date">Last updated: 4 days ago</p>
+                <Button url="#" text="See more photos" />
+                <div class="controls__count">
+                    <span class="current">21/</span>
+                    <span class="total">129</span>
+                </div>
+            </div>
+
+        </div>
+    </section>
 </main>