Pagination styling

src/style/molecules/_pagination.scss

@@ -15,9 +15,10 @@
     // Pages
     &__page {
         position: relative;
-        display: inline-block;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
         margin: 0 auto;
-        padding-left: 72px;
         font-family: $font-serif-extra;
         font-size: rem(72px);
         color: rgba($color-text, 0.15);
@@ -31,19 +32,19 @@
 
         // Numbers
         &--numbers {
-            position: absolute;
-            top: 0;
-            left: -32px;
-            height: 136px;
             overflow: hidden;
+            height: 62px;
+
+            @include breakpoint (sm) {
+                height: 136px;
+            }
 
             .scroll {
                 display: flex;
                 flex-direction: column;
-                height: 100%;
+                transform: translate(0, 0);
                 text-align: right;
                 line-height: 0.85;
-                transform: translate3d(0, -190%, 0);
                 transition: transform 250ms $ease-cubic;
                 will-change: transform;
             }
@@ -67,23 +68,36 @@
         // Hover
         &:hover {
             color: rgba($color-text, 0.25);
-
-            .pagination__page--numbers {
-                .scroll {
-                    transform: translate3d(0, -135%, 0);
-                }
-            }
         }
     }
 
     // Caption
     &__caption {
+        max-width: 420px;
+        margin: 0 auto;
         font-size: 10px;
         color: $color-lightgray;
         letter-spacing: 2px;
+        line-height: 1.6;
 
         @include breakpoint (sm) {
             font-size: 14px;
         }
     }
+
+    // Message
+    &__message {
+        padding: pxVW(40) 0;
+
+        h3 {
+            font-family: $font-serif;
+            font-size: rem(32px);
+            color: $color-secondary;
+            margin-bottom: 16px;
+
+            @include breakpoint (sm) {
+                font-size: rem(40px);
+            }
+        }
+    }
 }