Equalizer solution

This is my first iteration for the solution. I found this challenge particularly difficult, because I was trying to balance a dynamic and responsive design with techniques I'm not used to utilising. For instance I used a parent relative, child absolute relationship. I also had to find a way to overlap different elements again in a way that could remain responsive. I chose to use the transform translate property, however this left me with a problem of white space at the bottom of the page.

I aim to make another iteration which will attempt to solve the issue of the whitespace. I've taken on important feedback from the community over at slack and have included semantic landmarks like header, main and footer tags and I have featured the use of BEM which has helped although I'm still figuring it out.

Any and all feedback is very welcome. Thanks for reading and happy coding.