.pagination {
    width: 100%;
    position: relative;
    margin-top: 30px;
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.pagination ul {
    width: 100%;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.pagination ul li {
    width: 40px;
    height: 40px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 115%;
    letter-spacing: -0.03em;
    color: #8C8C8C;
}

.pagination ul li.next,
.pagination ul li.before {
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    border-radius: 8px;
}

.pagination ul li.next a,
.pagination ul li.before a {
    display: none;
}

.pagination ul li.next:before,
.pagination ul li.before:before {
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.829505 15.5455C0.390165 15.1062 0.390165 14.3938 0.829505 13.9545L6.78401 8L0.829507 2.04549C0.390167 1.60615 0.390167 0.893843 0.829507 0.454504C1.26885 0.0151645 1.98116 0.0151646 2.4205 0.454504L9.1705 7.20451C9.60983 7.64385 9.60983 8.35616 9.1705 8.7955L2.42049 15.5455C1.98116 15.9848 1.26884 15.9848 0.829505 15.5455Z' fill='%23121212'/%3E%3C/svg%3E");
}

.pagination ul li.before {
    transform: rotate(180deg);
}

.pagination ul li a {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 115%;
    letter-spacing: -0.03em;
    color: #8C8C8C;
    text-decoration: none;
}

.pagination ul li a:hover {
    color: #121212;
}