.pagination {
  display: grid;
  justify-content: center;
  margin-top: var(--margin-block);
  background-color: var(--slate-100);
}
@media (min-width: 740px) {
  .pagination {
    padding-block: 4px;
  }
}
@media (max-width: 739.98px) {
  .pagination {
    padding-block: 2px;
  }
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.page-numbers {
  display: grid;
  place-content: center;
  font-family: Ubuntu, sans-serif;
  font-weight: 500;
  line-height: 1;
}
@media (min-width: 740px) {
  .page-numbers {
    width: 52px;
    height: 40px;
    font-size: 22px;
  }
}
@media (max-width: 739.98px) {
  .page-numbers {
    width: 34px;
    height: 26px;
    font-size: 16px;
  }
}
.page-numbers.current {
  position: relative;
  color: var(--accent);
}
.page-numbers.current::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background-color: var(--accent);
}
.page-numbers:is(a):not(.prev, .next):hover, .page-numbers:is(a):not(.prev, .next):focus-visible {
  color: var(--accent);
}
.page-numbers.prev, .page-numbers.next {
  display: none;
}
.page-numbers.prev {
  transform: rotate(180deg);
}