.pagination-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

ul.pagination,
.pagination__wrapper ul.pagination {
    display: flex;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

ul.pagination .page-item .page-link,
ul.pagination li a,
ul.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: all 0.2s;
    background: #fff;
}

ul.pagination .page-item:not(.disabled):not(.active) .page-link:hover,
ul.pagination li a:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
}

ul.pagination .page-item.active .page-link {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
}

ul.pagination .page-item.disabled .page-link {
    color: #999;
    cursor: not-allowed;
    background: #f5f5f5;
}

.icon-angle-double-left::before,
.icon-angle-double-right::before,
.icon-angle-left::before,
.icon-angle-right::before {
    font-family: inherit;
    font-style: normal;
}

.icon-angle-double-left::before { content: '«'; }
.icon-angle-double-right::before { content: '»'; }
.icon-angle-left::before { content: '‹'; }
.icon-angle-right::before { content: '›'; }

.pagination__wrapper,
nav.pagination__wrapper {
    margin-top: 30px;
}