.pagination {
    height: 37px;
    margin: 3.5rem 0 6rem 0;
}

.pagination-button {
    border: 1px solid rgb(var(--color-graphite));
    border-radius: 50%;
    background: rgb(var(--color-mist));
    color: rgb(var(--color-graphite));
    font-size: var(--font-size-label);
    font-weight: 700;
    text-decoration: none;
    height: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 .2rem;
}

    .pagination-button.disabled {
        color: rgb(var(--color-dark-green), 0.4);
        border: none;
    }

    .pagination-button.active {
        color: rgb(var(--color-mist));
        background: rgb(var(--color-dark-green));
        border: 1px solid rgb(var(--color-dark-green));
    }

    .pagination-button:not(.disabled):hover {
        color: rgb(var(--color-dark-green));
        background: rgb(var(--color-dark-green), 0.4);
        border: 1px solid rgb(var(--color-dark-green));
    }

    .pagination-button.disabled, .pagination-button.active {
        pointer-events: none;
    }

    .pagination-button:first-child, .pagination-button:last-child {
        border: none;
    }