nav.pagination-navigator {
  width: 100%;
  margin: 2vw 0;
  gap: 0.6vw;
}

ul.pagination {
  padding: 1.5vw;
  width: 100%;
  gap: 0.5vw;
  /*border: 1px solid green;*/
}

ul.pagination li {
  width: 2.2vw;
  height: 2.2vw;
  border-radius: 0.8vw;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  color: #e2e8f0;
  font-weight: 500;
}

ul.pagination li span {
  width: 100%;
  height: 100%;
  border: 0.1vw solid #e2e8f0;
  border-radius: 0.8vw;
  transition: all 0.3s;
  color: #94a3b8;
  font-weight: 500;
}

ul.pagination li span.active {
  background-color: var(--green);
  border: none !important;
  color: var(--light-bg);
}

ul.pagination li span:not(span.active):hover {
  background-color: var(--lightest-green);
}

ul.pagination li button {
  width: 100%;
  height: 100%;
  gap: 0.2vw;
  font-size: 0.95vw;
  background-color: var(--light-green);
  border-radius: 0.8vw;
  transition: all 0.3s;
  color: var(--light-bg);
}

ul.pagination li button:hover {
  background-color: var(--green);
}

ul.pagination li button:disabled {
  background-color: var(--light-green);
  opacity: 0.5;
}

ul.pagination li i {
  font-size: 1.4vw;
}
@media (max-width: 450px) {
  ul.pagination li {
    width: 7.2vw;
    height: 7.2vw;
    border-radius: 4vw;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
    color: #e2e8f0;
    font-weight: 500;
  }
  ul.pagination li span {
    width: 100%;
    height: 100%;
    border: 0.2vw solid #e2e8f0;
    border-radius: 2vw;
    transition: all 0.3s;
    color: #94a3b8;
    font-weight: 500;
    font-size: 2.9vw;
  }
  ul.pagination li i {
    font-size: 2.4vw;
  }
  ul.pagination li button {
    width: 100%;
    height: 100%;
    gap: 0.2vw;
    font-size: 2vw;
    background-color: var(--light-green);
    border-radius: 2vw;
    transition: all 0.3s;
    color: var(--light-bg);
  }
}