CSS Li background-image decreasing per line text

Question

I was working on a pricing plan based on https://codepen.io/chaoticpotato/pen/zYEPRYG. However, when the text of each bullet point is more than one line it moves the text per line a little bit to the left. The result of this is that the bullet point background-image is only partially visible and losing visibility per line of text.

<ul class="featureList">
          <li>2 links</li>
          <li>Own analytics platform</li>
          <li>Chat support</li>
          <li class="disabled">Mobile application</li>
          <li class="disabled">Unlimited users</li>
        </ul>

.featureList {
  --color: #000;
  --icon: var(--redTick);
  --height: 0.875rem;

  margin: 0 0 2.75rem;
  padding: 0;
  font-weight: 500;

  li {
    color: var(--color);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;

    &:before {
      content: "";
      background-image: var(--icon);
      background-size: cover;
      display: block;
      width: 1.125rem;
      height: var(--height);
    }

    &:last-child {
      margin-bottom: 0;
    }

    &.disabled {
      --color: #b1b8c9;
      --height: 1.125rem;
      --icon: var(--close);
    }
  }
}

How can I fix this? I have to look around on internet but so far I could not find a proper solution.

Answer 1

As @psdpainter says in the comment above, the solution is adding flex-shrink: 0 to .featureList li:before