@media screen and (min-width: 960px) {
  /* PC */
  /* ----------  ---------- */

  .pagination-number-buttons {
    --width-of-button: 35px;
  }

  .pagination-number-buttons nav.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pagination-number-buttons .page-numbers {
    width: var(--width-of-button);
    aspect-ratio: 1 / 1;

    background-color: var(--primary-base-color-code);
    border: 1px solid var(--border-light-color-code);
    border-radius: 5px;

    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;
    color: var(--main-color-code);
    user-select: none;

    transition-property: var(--transition-property-default);
    transition-duration: var(--transition-duration-base);
    transition-timing-function: var(--transition-ease-default);
  }

  .pagination-number-buttons .page-numbers.current {
    border: none;
    background-color: var(--secondary-base-color-code);
    pointer-events: none;
  }

  .pagination-number-buttons .page-numbers.dots {
  }

  .pagination-number-buttons .page-numbers {
    margin-right: 0.55rem;
  }

  .pagination-number-buttons .page-numbers:hover {
    filter: brightness(0.9);
  }
  .pagination-number-buttons .page-numbers.dots:hover {
    filter: none;
  }

}

@media screen and (max-width: 959px) {
  /* Mobile */
  /* ----------  ---------- */
  .pagination-number-buttons {
    --width-of-button: 27.5px;
  }

  .pagination-number-buttons nav.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pagination-number-buttons .page-numbers {
    width: var(--width-of-button);
    aspect-ratio: 1 / 1;

    background-color: var(--primary-base-color-code);
    border: 1px solid var(--border-light-color-code);
    border-radius: 5px;

    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;
    color: var(--main-color-code);
    font-size: 0.85rem;
    user-select: none;

    transition-property: var(--transition-property-default);
    transition-duration: var(--transition-duration-base);
    transition-timing-function: var(--transition-ease-default);
  }

  .pagination-number-buttons .page-numbers.current {
    border: none;
    background-color: var(--secondary-base-color-code);
    pointer-events: none;
  }

  .pagination-number-buttons .page-numbers.dots {
  }

  .pagination-number-buttons .page-numbers {
    margin-right: 0.55rem;
  }

  .pagination-number-buttons .page-numbers:hover {
    filter: brightness(0.9);
  }
  .pagination-number-buttons .page-numbers.dots:hover {
    filter: none;
  }
}