.pagination-block {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.pagination-block__container--pages_list {
    display: flex;
}

.pagination-block__container--pages_list li {
    margin-right: 2rem;
}

.pagination-block__container--pages_list a {
    opacity: 0.3;
    transition: 300ms;
}

.pagination-block__container--pages_list a:hover {
    opacity: 1;
}

.pagination-block__container--button img {
    height: 16px;
    width: auto;
}

.projects-page__pagination{
    width: 100%;
    margin-top: 6rem;
}

.pagination-button {
    opacity: 0;
    transition: 300ms;
}

.button-visible {
    opacity: 0.3;
}

.button-visible:hover {
    opacity: 1;
}

@media only screen and (min-width: 475px) {
    
    .pagination-block {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        column-gap: 1rem;
    }

    .pagination-block__container--button:first-child {
        grid-column: 1/3;
        display: flex;
        justify-content: right;
        padding-right: 2rem;
    }

    .pagination-block__container--button:last-child {
        grid-column: 8/-1;
        display: flex;
        justify-content: left;
        padding-left: 2rem;
    }

    .pagination-block__container--pages {
        grid-column: 3/8;
    }

    .pagination-block__container--pages_list li {
        margin: 0 1.5rem 0 0.5rem;
    }

}


@media only screen and (min-width: 1024px) {

    .pagination-block {
        grid-template-columns: repeat(12, 1fr);
        column-gap: 0.75rem;
    }

    .pagination-block__container--button:first-child {
        grid-column: 1/2;
    }

    .pagination-block__container--button:last-child {
        grid-column: 7/-1;
    }

    .pagination-block__container--button img {
        height: 18px;
    }

    .pagination-block__container--pages {
        grid-column: 2/7;
    }

}