/* pagination component (BEM)) */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 2rem 0 0;
    justify-content: center;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

.pagination__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .4rem;
    align-items: center;
}

.pagination__link {
    --pg-bg: #fff;
    --pg-border: #e2e8f0;
    --pg-color: #334155;
    --pg-bg-hover: #f1f5f9;
    --pg-active: #021742;
    --pg-active-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: .55rem .7rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-decoration: none;
    background: var(--pg-bg);
    color: var(--pg-color);
    border: 1px solid var(--pg-border);
    border-radius: .55rem;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

    .pagination__link:hover, .pagination__link:focus {
        background: var(--pg-bg-hover);
    }

.pagination__link--active {
    background: var(--pg-active);
    color: var(--pg-active-color);
    border-color: var(--pg-active);
}

.pagination__prev, .pagination__next {
    font-weight: 600;
}

    .pagination__prev[aria-disabled='true'], .pagination__next[aria-disabled='true'] {
        opacity: .35;
        pointer-events: none;
    }