.pagination
    // position: absolute
    // bottom: 30px
    // left: 50%
    // transform: translateX(-50%)
    text-align: center
    width: 100%

    & &__page-link
        font-weight: normal
        margin: 0 5px

        &--current
            font-weight: bold
            font-size: 1.2em
            // text-decoration: underline
            color: $color-secondary

    & &__nav-link
        font-size: 1.4em
        margin: 0 2px

        $nav-link-edge-margin-width: 18px

        &--right-margin
            margin-right: $nav-link-edge-margin-width

        &--left-margin
            margin-left: $nav-link-edge-margin-width

        &--hidden
            display: none
            

// Small devices (landscape phones, 576px and up)
@media (max-width: $small-devices)
    .pagination
        & &__page-link
            margin: 0 3px

        & &__nav-link
            font-size: 1.4em
            margin: 0 2px

            $nav-link-edge-margin-width: 10px

            &--right-margin
                margin-right: $nav-link-edge-margin-width

            &--left-margin
                margin-left: $nav-link-edge-margin-width            
// Medium devices (tablets, 768px and up)
@media (max-width: $medium-devices)
	pass
// Large devices (desktops, 992px and up)
@media (max-width: $large-devices)
    pass
// Extra large devices (large desktops, 1200px and up)
@media (max-width: $x-large-devices)
	pass            
            
