.pagination {
  display: flex;
  justify-content: center;
  --size: 24px;
  --bgColor: var(--listBorderColor);
  --numColor: var(--textColor);
}
.pagination .nav-links .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 5px;
}
.pagination .nav-links .page-numbers > li {
  width: var(--size);
  height: var(--size);
}
.pagination .nav-links .page-numbers > li > * {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.pagination .nav-links .page-numbers > li > *.page-numbers:not(.dots):not(.next):not(.prev) {
  box-sizing: border-box;
  background: var(--bgColor);
  color: var(--numColor);
}
.pagination .nav-links .page-numbers > li > *.page-numbers.current {
  --bgColor: var(--colorBlack);
  --numColor: #FFF;
}

.pagenation {
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  --defaultButton: 32px;
  --controlButton: 48px;
}
.pagenation .btn .a {
  width: var(--defaultButton);
  height: var(--defaultButton);
  color: var(--primaryColor);
}
.pagenation .btn .a .txt {
  font-size: var(--fontSize_l);
}
.pagenation .btn.active .a {
  color: var(--secondaryColor);
}
.pagenation .btn.btn_prev .a, .pagenation .btn.btn_next .a {
  width: var(--controlButton);
  height: var(--controlButton);
  background: var(--secondaryColor);
  color: #FFF;
  border-radius: 10px;
}
.pagenation .btn.btn_prev {
  margin-right: var(--space2);
}
.pagenation .btn.btn_next {
  margin-left: var(--space2);
}
@media (min-width: 768px) {
  .pagenation {
    --controlButton: 66px;
  }
}