/*___________________________
Pagination
___________________________*/

.paginationGroup {
  margin: 0 auto;
  width: fit-content;
}

.paginationGroup .wp-pagenavi {
  display: flex;
  gap: 16px;
}

.paginationGroup .page,
.paginationGroup .current,
.paginationGroup .extend,
.paginationGroup .nextpostslink,
.paginationGroup .last,
.paginationGroup .first {
  align-items: center;
  border: 1px solid #707070;
  border-radius: 50%;
  color: #232323;
  display: flex;
  font-family: var(--familyInter);
  font-size: 14px;
  font-weight: 400 !important;
  height: 40px;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
  padding: 0;
  transition: background-color 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
  width: 40px;
}

.paginationGroup span.current {
  background: #424242;
  border: 1px solid #707070;
  color: #fff;
}

.paginationGroup .extend {
  display: none;
}

.paginationGroup .nextpostslink,
.paginationGroup .previouspostslink {
  border: none;
  border-radius: 0;
  color: transparent;
  margin: 0;
  padding: 0;
  position: relative;
  width: 25px;
}

.paginationGroup .nextpostslink::after,
.paginationGroup .previouspostslink::after {
  border-bottom: 1px solid #424242;
  border-right: 1px solid #424242;
  content: "";
  height: 8px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 8px;
}

.paginationGroup .nextpostslink::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.paginationGroup .previouspostslink::after {
  transform: translate(-50%, -50%) rotate(135deg);
}

.paginationGroup .wp-pagenavi a:not(.nextpostslink):not(.previouspostslink):hover {
  background: #d8d8d8;
  border: 1px solid #707070;
}

.paginationGroup:not(:has(.wp-pagenavi)) {
  display: none;
}

@media screen and (max-width: 767px) {
  .paginationGroup .wp-pagenavi {
    gap: 9px;
  }
}