I’m not telling you in pixels, because it does not relate to pixels. Learn a new language, pixels are generally bad in RWD and your obsession with them is a big part of all the problems you encounter in making things responsive.
vw stands for Viewport Width. 1vw = 1% of the width of the viewport. Applying it to the font-size makes the text responsive, it grows and shrinks with the view port, which mostly works well in this case, but it does have its problems and limitations. For one, it only works off viewport width, not container width, which would be far more useful.
Also it can go to extremes as the screen gets big or small.
That’s what that is, and why I said this:
When the text gets too small, have a query that fixes the size:-
@media screen and (max-width: 500px) { figcaption { font-size:0.5em;}}
When it gets too big, add a query for that:
@media screen and (min-width: 900px) { figcaption { font-size:1.5em;}}
Yes, that was deliberate, the caption is placed absolutely of the bottom of the image, overlapping it.
What’s properly about that? I’m sure @ronpat has already mentioned about “fixing” things with margins, it only causes problems further down the line. How about just removing position:absolute if you don’t want an overlap?
I’m sure there is a better way.