News homepage with HTML5, SCSS, Flexbox, Grid and Parcel

I experienced this project as educational because of the following

1. I learned how to implement progressive enhancement for a (mobile) navigation
2. How to create a complex layout with Grid

Asking for feedback

Despite of this I do want to ask feedback about the following due to uncertainty of myself

1. Is the BEM naming convention used correctly?
2. Is the semantic HTML markup I used correctly?

The problem I stumbled upon

The only real problem I faced was that I could not disable scrolling when the mobile navigation was open. This caused the layout to shift slightly to the right on opening and to the left when closing. The cause of this was because of the scrollbar disappearing and appearing.

After spending some time and not being able to get this fixed, I decided to use position: fixed instead of absolute. It does the job for now, but is not exactly how I wanted it to be.

If there is someone who does know how to prevent scrolling and not causing this shift to the right and left, please let me know. I'm quite curious how this problem can be solved.