Mobile-first solution using SCSS, BEM, and Flexbox

I normally avoid setting a height on anything, especially not using absolute units like px, but I needed to increase the size of the bottom container housing the reviewers' feedback.

I'm aware using padding increases the size, but you can't use align-items or align-self property of flexbox to align the items at the start, middle, or center of the container because its content-box would still be the same size.

Are there better alternatives to setting a height when you don't have the Figma files?

Also, I wasn't sure why the background images were split into top and bottom or where the cutoffs were, so I ended up going with the halfway point of my content as the splitting point.