.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  transition: margin-top 0.4s ease;
}
.pagination-container ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pagination-container ul li,
.pagination-container .prev-wrapper,
.pagination-container .next-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border1);
  border-radius: 4px;
  height: 45px;
  min-width: 45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: border-color 0.4s ease, background-color 0.4s ease;
}
.pagination-container ul li a,
.pagination-container .prev-wrapper a,
.pagination-container .next-wrapper a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 45px;
  height: 45px;
}
.pagination-container ul li:hover,
.pagination-container .prev-wrapper:hover,
.pagination-container .next-wrapper:hover {
  border-color: var(--blue1);
}

.pagination-container .prev-page svg,
.pagination-container .next-page svg {
  transition: color 0.4s ease, fill 0.4s ease, stroke 0.4s ease;
}

.pagination-container .prev-page:hover svg,
.pagination-container .next-page:hover svg {
  color: var(--blue1);
}

.pagination-container ul li.current {
  color: var(--white1);
  background: var(--blue1);
  border-color: var(--blue1);
}
.pagination-container ul li.disabled,
.pagination-container .prev-wrapper.disabled,
.pagination-container .next-wrapper.disabled {
  color: var(--grey1);
  pointer-events: none;
}
/* Responsive */
@media (max-width: 768px) {
  .pagination-container {
    margin-top: 24px;
    flex-wrap: wrap;
  }
  .pagination-container ul {
    order: 1;
    flex: 0 0 100%;
  }
  .pagination-container .prev-wrapper {
    order: 2;
    flex: 1 0 45%;
    max-width: 150px;
    height: 40px;
  }
  .pagination-container .prev-wrapper a {
    width: 100%;
    height: 40px;
  }
  .pagination-container .next-wrapper {
    order: 3;
    flex: 1 0 45%;
    max-width: 150px;
    height: 40px;
  }
  .pagination-container .next-wrapper a {
    width: 100%;
    height: 40px;
  }
  .pagination-container ul li {
    height: 40px;
    width: 40px;
  }
  .pagination-container ul li a {
    height: 40px;
    width: 40px;
  }
  .pagination-container .prev-wrapper,
  .pagination-container .next-wrapper {
    display: none;
  }
}