<img> within <figure> not flexible

[glow12121]

The images' width does not change when inside <figure> tag.

[glow12121]

I still haven't figure this out, but I've come upon other people asking similar questions.

For example: https://stackoverflow.com/questions/77382285/width-set-in-rem-not-scaling-responsively-as-expected

I slightly tweaked your style with img { max-width: 50rem; } etc instead of max-width: 100%;. As a result, both the standalone img and img within figure are not responsive.

What I want to achieve is that large images have the same width as text.

[glow12121]

I think I've solved this with:

img {
  max-width: 100%;
}
figure {
  max-width: 50rem;
}

Not sure why rem's don't work for images but do work for figures.