.pagination {
  padding-top: 20px;
  border-top: 1px solid var(--c-gray-25);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
@media (max-width: 1024px) {
  .pagination {
    gap: 4px;
  }
}
.pagination .prev,
.pagination .next {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination .prev span,
.pagination .next span {
  display: inline;
}
@media (max-width: 1024px) {
  .pagination .prev span,
  .pagination .next span {
    display: none;
  }
}
.pagination .page-numbers:not(.dots):not(.next):not(.prev) {
  --br-md: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 40px;
  height: 40px;
  color: var(--c-white);
  font-size: var(--fs-xs);
  border-radius: var(--br-md);
}
.pagination .page-numbers:not(.dots):not(.next):not(.prev):hover {
  color: var(--c-gray-900);
  background-color: var(--c-gray-50);
}
.pagination .page-numbers:not(.dots):not(.next):not(.prev).current {
  color: var(--c-white);
  background-color: var(--c-primary-50);
}