.pagination {
    display: flex;
    width: 100%;
    list-style: none;
    justify-content: center;
    margin: 1.5rem 0;
    padding-top: 3rem;
    flex-wrap: wrap;
    line-height: 3.5rem;

    @media (max-width: 390px) {
        & {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }
    }

    .page-item {
        margin: 0 0.5rem;
        
        @media (max-width: $breakpoint-sm) {
            & {
                margin: 0 0.3rem;
                font-size: 1.2rem;
            }
        }

        .page-link {
            background: var(--color-primary);
            border-radius: 0.25rem;
            box-shadow: none;
            color: var(--color-white);
            font-weight: bold;
            text-decoration: none;
            transition: 1s all;
            padding: .7rem 1rem;

            @media (max-width: $breakpoint-sm) {
                & {
                    padding: .5rem;
                }
            }

            &:hover {
                background: var(--color-primary-dark-light);
            }
        }

        .current {
            background: var(--color-gray-line);
        }
    }
}
