The gotcha of align-content with block elements
Everyone is excited about the new align-content that works with block-level elements, but pay attention when you want to center elements such as <img>, <iframe>, <canvas>, <video>, etc.
⚠️ They won't get centered ⚠️
They will look centered but in reality, they are not and this is not a bug!
Images and similar inline-level elements have that strange white space under them due to the default baseline alignment, and that space is preserved when using align-content because we align the "whole content"
So don't forget to get rid of that space using vertical-align: top
That space may look small but it can make a difference especially if you use a big font-size.
See the Pen align-content with block elements by Temani Afif (@t_afif) on CodePen.