div.pagination,
div.pagination-wrapper {
  margin: 2.5em 0 0;

  ul {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      text-align: center;
      border: none;

      a,
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: var(--color-neutral-700);
        font-size: var(--font-size-xs);
        font-weight: 500;
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-200);
        border-radius: 40px;
        text-decoration: none;
        transition: all 0.3s ease;

        svg {
          width: 11px;
          height: 11px;

          path {
            fill: currentColor;
          }
        }
      }

      a {
        &:hover {
          background-color: var(--color-neutral-200);
          border-color: var(--color-neutral-200);
        }

        &:focus-visible {
          background-color: var(--color-neutral-200);
          border-color: var(--color-neutral-200);
        }
      }

      span.current {
        background-color: var(--color-neutral-200);
        border-color: var(--color-neutral-200);
      }
    }
  }
}