Responsive omelette article challenge

What are you most proud of, and what would you do differently next time?

I would create a spacing system variables so I won't forget the sizing, and make everything consistent.

What challenges did you encounter, and how did you overcome them?

I used javascript to move the image outside of the container, on smaller screens. Because using position absolute would overlap the content of the container behind the image.

The second challenge was to add spacing to the markers or number of ol, ul. I started with:

ul li::marker, but it didn't work, because as I figured out before the spacing for this tag is not supported in every browser.

So I've decided to add spacing to each individual first child element inside the li: ul li :first-child { padding-left: 0.5rem; }

What specific areas of your project would you like help with?

Is it possible with pure CSS to make it similar to the solution example where the image is outside of the article container?