/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
    margin-top: var(--sp-32);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
}

.pagination__desktop {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
}

.page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: none;
    background: transparent;
    border-radius: var(--r-pill);
    font-size: 14px;
    color: var(--text-subtle);
    display: grid;
    place-items: center;
}

    .page-btn:not(.is-active):not(:disabled):hover {
        background: var(--primary-200);
        color: var(--text-active);
    }

    .page-btn.is-active {
        background: var(--btn-primary-active);
        color: var(--text-alt);
        font-weight: 700;
    }

    .page-btn.is-active:hover {
        background: var(--accent);
    }

.page-btn--nav {
    color: var(--icon-subtle);
}

.page-btn:disabled {
    color: var(--icon-disabled);
    cursor: default;
}

.page-btn svg {
    display: block;
}

.pagination__mobile {
    display: none;
}

@media (max-width: 768px) {
    .pagination__desktop {
        display: none;
    }

    .pagination__mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-16);
        font-size: 14px;
        color: var(--text-subtle);
    }
}