BEM + Grid Template Areas to make responsive design a cake walk

• I was scared of CSS to death last year, later somehow managed to learn it and bring design to life with loads of trial and error ( just like ~ 1.25 million Indian railway employees try super hard to keep slow moving trains on track and make sure it reaches destination with 1 - 4 hours of scheduled time. I'm an Indian who stayed in Germany for many years and seen how things should be run efficiently )
• Then I found the magic of "BEM" and "Grid Template Areas"
• This is 1st project where I've used "Grid Template Areas"
• I'll highly recommend to use above technique and see the difference with your other ways of styling.
• Usage of Grid template area is like playing Jigsaw Puzzle Game where you first cut design into appropriate pieces and then place pieces in place with template area names.
• With BEM I could play around spacing without worrying about breaking things randomly, in fact I can confidently say BEM is life saver
• I did struggle with placement, spacing etc as it was my 1st project but this technique makes me think differently than flexbox styling, I can avoid position totally and do much lesser padding, margin etc as well

please review code and let me know areas of improvement.