.custom-pagination {
  padding-top: 36px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.custom-pagination > div {
  display: flex;
  align-items: center;
}
.custom-pagination .icon {
  width: 16px;
  height: 18px;
}
.custom-pagination .page-arrows,
.custom-pagination .page-numbers {
  pointer-events: all;
  background: var(--color-white);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.custom-pagination .page-arrows.first .icon,
.custom-pagination .page-arrows.last .icon {
  width: 19px;
}
.custom-pagination .page-arrows.disabled {
  color: var(--color-lightgray);
  pointer-events: none;
}
.custom-pagination .page-numbers {
  font-weight: 700;
  font-size: var(--font-size-16);
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--color-main);
}
.custom-pagination .page-numbers.current {
  color: var(--color-white);
  background: var(--color-main);
}
.custom-pagination .pagination-prev-group .icon {
  rotate: 180deg;
}
@media (max-width: 992px) {
  .custom-pagination .page-arrows,
  .custom-pagination .page-numbers {
    width: 48px;
    height: 48px;
  }
  .custom-pagination .page-numbers {
    font-size: var(--font-size-15);
  }
}
@media (max-width: 560px) {
  .custom-pagination .page-arrows,
  .custom-pagination .page-numbers {
    width: 36px;
    height: 36px;
  }
  .custom-pagination .page-numbers {
    font-size: var(--font-size-14);
  }
  .custom-pagination .icon {
    width: 13px;
    height: 14px;
  }
  .custom-pagination .page-arrows.first .icon,
  .custom-pagination .page-arrows.last .icon {
    width: 15px;
  }
}
@media (any-hover: hover) {
  .custom-pagination .page-arrows:hover,
  .custom-pagination .page-numbers:hover {
    color: var(--color-white);
    background: var(--color-main);
  }
}