Responsive E-Learning Landing Page using Generic HTML/CSS, BEM Naming

I would love people to take a hard look at my code and give me as much feedback as possible. :) This one gave me some trouble, and I tried a few things for the first time. Particular items I would especially love feedback on are:

1. My usage of the BEM naming system
2. My attempt at making my HTML more accessible
3. How I can improve the responsiveness and overall style of the hero images. I initially used HTML image elements but switched to background images in CSS since I couldn't get the HTML elements version to work.
4. The overall responsiveness of the page. I used the Chrome developer tools to design it using mobile, tablet and desktop views, but it looks awkward when resizing the page between those points. Also, I don't like how the hero image is also re-sizing within the div; I feel like it should be one size, then at the breakpoint change to the next hero image.
5. I never got the shading on the gradient to work properly.
6. The way I used CSS variables for colors and font styling. This is the first time I actually used Figma so I used the actual pixel sizes instead of having a base size and using rems to size different elements.

Any and all feedback is welcome, including for anything I didn't mention. Thanks!