Fix Photos page responsive

src/style/pages/_photos.scss

@@ -3,18 +3,18 @@
     // Intro Section
     &__intro {
         overflow: hidden;
-        margin-bottom: 72px;
+        margin-bottom: clamp(32px, 7.5vw, 96px);
         color: $color-text;
         text-align: center;
 
         // Title
         h1 {
-            margin-top: -20px;
+            margin: -20px 0 48px;
             color: $color-secondary;
             line-height: 1;
 
             @include bp (sm) {
-                margin-top: -100px;
+                margin: -100px 0 0;
             }
         }
         // Text
@@ -59,7 +59,7 @@
             justify-content: center;
             align-items: center;
             min-height: 64px;
-            margin: 20px 0;
+            margin-top: 20px;
             padding: 0 12px;
             background: $color-primary-darker;
             border-radius: 50vh;
@@ -69,6 +69,7 @@
             }
             @include bp (sm) {
                 height: 72px;
+                margin-top: 0;
                 padding: 28px 32px;
             }
 
@@ -145,12 +146,14 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            margin-top: 20px;
 
             @include bp (sm) {
                 position: absolute;
                 top: 50%;
                 right: 56px;
                 transform: translateY(-50%);
+                margin-top: 0;
             }
 
             a {
@@ -202,7 +205,7 @@
 
         @include bp (sm) {
             margin: 0 30px;
-            padding: 64px 0;
+            padding: clamp(40px, 5vw, 64px) 0;
         }
 
         &:before, &:after {
@@ -241,11 +244,11 @@
         }
         @include bp (sm) {
             // Swich to template: 2-1-1 / 1-1-2 / 4
-            grid-column: 2 / span 22;
             grid-template-columns: repeat(4, 1fr);
             grid-gap: 24px;
         }
         @include bp (sd) {
+            grid-column: 2 / span 22;
             grid-gap: 40px;
         }
 
@@ -366,10 +369,12 @@
         justify-content: center;
 
         @include bp (sm) {
+            justify-content: space-between;
+            margin: clamp(56px, 4.5vw, 80px) 0;
+        }
+        @include bp (sd) {
             --columns: 22;
             grid-column: 2 / span var(--columns);
-            justify-content: space-between;
-            margin: 80px 0;
         }
 
         // Updated Date
@@ -381,6 +386,7 @@
             font-weight: 300;
             text-align: center;
             margin: 24px 0 48px;
+            line-height: 1.35;
 
             @include bp (sm) {
                 grid-column: span 5;
@@ -388,6 +394,14 @@
                 text-align: left;
                 margin: 0;
             }
+
+            time {
+                display: block;
+
+                @include bp (sd) {
+                    display: inline;
+                }
+            }
         }
 
         // See More Photos
@@ -397,7 +411,10 @@
             margin: 0 auto;
 
             @include bp (sm) {
-                grid-column: 6 / span 12;
+                grid-column: 7 / span 12;
+            }
+            @include bp (sd) {
+                grid-column-start: 6;
             }
         }
 
@@ -406,18 +423,31 @@
             grid-column: span var(--columns);
             grid-row: 3;
             text-align: center;
-            color: rgba($color-gray, 0.3);
+            color: rgba($color-text, 0.3);
             font-family: $font-serif;
             font-size: rem(64px);
+            font-weight: 200;
             line-height: 1;
             letter-spacing: -0.05em;
 
             @include bp (sm) {
-                grid-column: 16 / span 7;
+                grid-column: 18 / span 7;
                 grid-row: 1;
                 margin-left: auto;
                 text-align: right;
             }
+            @include bp (sd) {
+                grid-column-start: 16;
+            }
+
+            span {
+                display: inline-block;
+                margin: 0 -6px;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
         }
     }
 
@@ -426,7 +456,7 @@
         grid-column: span var(--columns);
         margin-bottom: 0;
 
-        @include bp (sm) {
+        @include bp (sd) {
             grid-column: 2 / span 22;
         }
     }