@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: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 5px;

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

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

    transition-property: all;
    transition-duration: 0.33s;
    transition-timing-function: ease;
  }

  .pagination-number-buttons .page-numbers.current {
    border: none;
    background-color: #eeeeee;
    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: #ffffff;
    border: 1px solid #dddddd;
    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: all;
    transition-duration: 0.33s;
    transition-timing-function: ease;
  }

  .pagination-number-buttons .page-numbers.current {
    border: none;
    background-color: #eeeeee;
    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;
  }
}