// Pagination
.pagination {
    position: relative;
    padding: 64px 0 72px;
    background-color: $color-tertiary;
    text-align: center;

    @include breakpoint (sm) {
        padding-top: pxVW(120);
        padding-bottom: pxVW(120);
    }
    @include breakpoint (xl) {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    // Pages
    &__page {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-family: $font-serif-extra;
        font-size: rem(72px);
        color: rgba($color-text, 0.15);
        line-height: 1;
        cursor: pointer;
        transition: color 250ms $ease-cubic;

        @include breakpoint (sm) {
            font-size: rem(120px);
        }
        @include breakpoint (md) {
            font-size: rem(160px);
        }

        // Hover
        &:hover {
            color: rgba($color-text, 0.25);
        }
    }

    // Numbers
    &__numbers {
        overflow: hidden;
        height: 62px;
        margin-right: 4px;

        @include breakpoint (sm) {
            height: 102px;
        }
        @include breakpoint (md) {
            height: 136px;
        }

        .scroll {
            display: flex;
            flex-direction: column;
            transform: translate(0, 0) translateZ(0);
            text-align: right;
            line-height: 0.85;
            transition: transform 325ms $ease-cubic;
            will-change: transform;
        }
    }

    // Info
    &__info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -72%) translateZ(0);
        font-family: $font-serif;
        font-size: rem(18px);
        color: $color-secondary-bright;

        @include breakpoint (sm) {
            font-size: rem(32px);
        }
        @include breakpoint (md) {
            font-size: rem(40px);
        }
    }

    // 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);
            }
        }
    }
}