.pagination-wrapper {
  * {
    transition: color 0.3s ease, background-color 0.3s ease, fill 0.3s ease;
  }
  ul {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0;
    list-style: none;
    a,
    span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      font-size: var(--fs-md);
      font-weight: 700;
      border-radius: var(--br-xs);
      @media (max-width: 576px) {
        width: 30px;
        height: 30px;
      }
      svg {
        width: 16px;
        height: 16px;
        path {
          fill: var(--c-black);
        }
      }
      &.current {
        color: var(--c-white);
        background-color: var(--c-primary-200);
      }
    }
    a {
      color: var(--c-black);
      background-color: transparent;
      &:hover {
        color: var(--c-white);
        background-color: var(--c-primary-200);
        svg {
          path {
            fill: var(--c-white);
          }
        }
      }
    }
  }
}