HTML, CSS, Media Queries, css-variables, css-counter

Question about styling the numbers in the <ol>. After googling I found out the existence of css counters and ::before I used this to style the numbers of the ordered list.

But how does one make sure the text is wrapped correctly like in the pictures provided by frontendmentor? My text continues underneath the numbers when the text is too long, but i would like it to be the same as in the images provided.