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>
 
 

src/style/_effects.scss

@@ -16,3 +16,14 @@
         0 12px 12px rgba(#736356, 0.05),
         0 24px 24px rgba(#736356, 0.05);
 }
+
+// Box: Photo
+.shadow-photo {
+    $shadow-color: rgba(122, 93, 68, 0.075);
+    box-shadow:
+        0 1px 1px $shadow-color,
+        0 2px 2px $shadow-color,
+        0 4px 4px $shadow-color,
+        0 8px 8px $shadow-color,
+        0 16px 16px $shadow-color;
+}

src/style/pages/_photos.scss

@@ -2,10 +2,10 @@
 .photos {
     // Intro Section
     &__intro {
+        overflow: hidden;
+        margin-bottom: 72px;
         color: $color-text;
         text-align: center;
-        overflow: hidden;
-        padding-bottom: clamp(250px, 27vw, 600px);
 
         // Title
         h1 {
@@ -141,4 +141,130 @@
             }
         }
     }
+
+    // Content Block
+    &__content {
+        background-color: $color-tertiary;
+        width: 100%;
+        // margin: 0 12px;
+        padding: 64px 0;
+    }
+
+    // Photo Grid
+    &__grid {
+        grid-column: 2 / span 22;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-gap: 40px;
+
+        .photo {
+            overflow: hidden;
+            border-radius: 6px;
+
+            a {
+                position: relative;
+                display: block;
+                height: 100%;
+
+                & > picture {
+                    width: 100%;
+                    height: 100%;
+
+                    img {
+                        display: block;
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                    }
+                }
+            }
+
+            .post-card {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+            }
+
+            // Photo sizes
+            &:nth-child(11n+1) {
+                grid-column: 1 / span 2;
+            }
+            &:nth-child(11n+8) {
+                grid-column: 3 / span 2;
+            }
+            &:nth-child(11n) {
+                grid-column: 1 / span 4;
+            }
+        }
+    }
+
+    // Controls
+    .controls {
+        grid-column: 1 / span var(--columns);
+        display: grid;
+        margin: 48px auto;
+        align-items: center;
+        justify-content: center;
+
+        @include bp (sm) {
+            --columns: 22;
+            grid-column: 2 / span var(--columns);
+            justify-content: space-between;
+            margin: 80px auto;
+        }
+
+        // Updated Date
+        &__date {
+            grid-column: span var(--columns);
+            grid-row: 2;
+            font-size: rem(18px);
+            color: rgba($color-gray, 0.6);
+            font-weight: 300;
+            text-align: center;
+            margin: 24px 0 48px;
+
+            @include bp (sm) {
+                grid-column: span 4;
+                grid-row: 1;
+                text-align: left;
+                margin: 0;
+            }
+        }
+
+        // See More Photos
+        .button {
+            grid-column: span var(--columns);
+            grid-row: 1;
+            margin: 0 auto;
+            height: 56px;
+            background-color: #F2D3B8;
+            font-size: rem(16px);
+
+            @include bp (sm) {
+                grid-column: 6 / span 12;
+                height: 72px;
+                padding: 0 40px;
+                font-size: rem(18px);
+            }
+        }
+
+        // Photo Count
+        &__count {
+            grid-column: span var(--columns);
+            grid-row: 3;
+            text-align: center;
+            color: rgba($color-gray, 0.3);
+            font-family: $font-serif;
+            font-size: rem(64px);
+            line-height: 1;
+            letter-spacing: -0.05em;
+
+            @include bp (sm) {
+                grid-column: 16 / span 7;
+                grid-row: 1;
+                margin-left: auto;
+                text-align: right;
+            }
+        }
+    }
 }