How to press the description to the bottom and not lose the background near the background?

Question

css

Good afternoon colleagues!
SUBJECT: There is a grid of topics All items are of the same height, as it should be on flexes. Composition
1. A block with an image set as a background and displayed from the admin section.
2. Title. It can be ANY length, and hence the height.
3. Description.
https://codepen.io/emelyanova/pen/mMZLxJ
Items are in a flex container and rubber in all directions. The image block has a standard padding-top hack for background, proportional images.
PROBLEM: PRESS the description to the bottom!!! In this case, the blocks must be equal to the highest neighbor. Those. the behavior of FBoxes should be preserved,
Attempts to solve:
Absolute - does not roll the block has a background. Setting the min-height is not an option, it will not follow its neighbor in size.
Flexbox - the specified height of the block with the picture is LOST! matgin top: auto; - does not work. What am I doing wrong here?
PLEASE: Help solve the problem! How to press the "footer" here and not lose the picture! Those. how to make a rubber-height block, in which the description is always at the bottom and the picture is the right size!

Answer 1

if in .steps__item do not use , but onlyalign-items: center;

display: flex;
flex-direction: column;

then the background of the block with the picture does not disappear, and the block with the description is pressed to the bottom.

Answer 2

.steps__item {
display: flex;
flex-direction: column;
}