diff --git a/src/style/molecules/_pagination.scss b/src/style/molecules/_pagination.scss index c7654b3..6dcc8f3 100644 --- a/src/style/molecules/_pagination.scss +++ b/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); + } + } + } }