div.pagination {  margin-top: var(--gutter); }
div.nav-links {  }
.nav-links { display: flex; justify-content: center }


.nav-links span:not(.sr-only),
.nav-links a { display: block; margin: 6px;
    background: white;
    font-size: 16px; color: inherit;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    min-width: 40px; width: 40px; text-align: center;
    letter-spacing: 0.17px; position: relative;

    border: 1px solid var(--black); border-radius: 50%;
}
.nav-links span.current {
    background: var(--light-purple);
}
.nav-links a.prev::after,
.nav-links a.next::after {
    content:"";
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    display: block; width: 22px; height: 22px;

    background-size: 22px 22px; background-repeat: no-repeat; background-position: center;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M8.89626 5.5L7.60376 6.7925L11.8021 11L7.60376 15.2075L8.89626 16.5L14.3963 11L8.89626 5.5Z" fill="%23111B29"/> </svg>');
}
.nav-links a.prev::after {
    transform: translate(-50%,-50%) rotate(180deg);
}
.nav-links a:hover { color: white;  background: var(--dark-purple); }

.nav-links a.prev:hover::after,
.nav-links a.next:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M8.89626 5.5L7.60376 6.7925L11.8021 11L7.60376 15.2075L8.89626 16.5L14.3963 11L8.89626 5.5Z" fill="%23FFFFFF"/> </svg>');
}

.nav-links a:focus-visible {  box-shadow: 0 0 0 3px white, 0 0 0 5px var(--orange);   }