.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: var(--fs-1);
  --bs-pagination-color: var(--color-secondary-5);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: transparent;
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--white);
  --bs-pagination-hover-bg: var(--color-primary-3);
  --bs-pagination-hover-border-color: var(--color-primary-3);
  --bs-pagination-focus-color: inherit;
  --bs-pagination-focus-bg: transparent;
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--white);
  --bs-pagination-active-bg: var(--color-primary-3);
  --bs-pagination-active-border-color: var(--color-primary-3);
  --bs-pagination-disabled-color: var(--white);
  --bs-pagination-disabled-bg: var(--color-secondary-2);
  --bs-pagination-disabled-border-color: var(--color-secondary-2);

  gap: var(--space-2xs);

  .page-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--space-l);
    width: var(--space-l);

    .page-link {
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding-bottom: 0.55rem;
      width: 100%;
    }

    &:first-child,
    &:last-child {
      .page-link {
        &:hover {
          background-color: transparent;
        }
      }
    }
  }
}