Create photo grid for photos page

with control bar

src/style/_effects.scss

@@ -15,4 +15,15 @@
         0 6px 6px rgba(#736356, 0.05),
         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;
+            }
+        }
+    }
 }