.pagination {
  margin: 0;
  font-size: 0.85rem;

  .page-item {
    &.active {
      .page-link {
        color: rgb(255, 255, 255);
        background: transparent;
        background-color: var(--primary-color);

        font-size: 1rem;
        border-radius: 1rem;
        transition-duration: 200ms;
        margin-right: 0.5em;
        margin-left: 0.5em;

        padding: 0.5em 0.7em;
      }
    }

    .page-link {
      // color: #6f6f6f;
      // color: rgb(126, 127, 128);
      color: rgb(35, 36, 36);
      border-color: transparent;

      font-size: 0.875rem;
      line-height: 1.25rem;
      font-weight: 500;
      transition-duration: 200ms;

      padding-left: 0.3rem;
      padding-right: 0.3rem;
    }

    &:not(.active):hover {
      .page-link {
        color: var(--primary-color);
        font-weight: bold;
        background-color: transparent;
      }
    }

    &:first-child {
      margin-right: 1em;
      .page-link {
        border-radius: 0.75rem;
        border-color: var(--primary-color);
        color: var(--primary-color);
        padding: 0.5em 0.7em;
      }
    }

    &:last-child {
      .page-link {
        border-radius: 0.75rem;
        border-color: var(--primary-color);
        color: var(--primary-color);
        padding: 0.5em 0.7em;
      }
    }
  }
}