All solutions

I found setting the whitespace around the grid container hard without making some articles disappear or overflow on the page. Deleting some max-height properties and setting my media query to rem instead of max 480px helped with that but I don't feel fully confident with adding padding/margin in grid yet.

Another thing I had trouble with was letting the review paragraphs start all inline of eachother. Finding the right rem font size for the headers so they all would take up 3 lines helped. Yet I have not yet managed to let the text end on the same line like the example given.

Questions I have:

• Is my BEM-notation correct? This is my first non-card project using it and it came in handy.
• Do the margins/paddings look good on your screen without any overflow / hidden parts issues?
• Are there ways I could improve the accesibility?

Aside from that, any other ways I could improve this solution are more than welcome. ☺

Tried using BEM for the first time but the classes would have become extremely long at a certain point so I switched back to 'normal' selectors. Wasn't sure how to properly name the class of the subscription div. Neither about what value to add to the role attribute for screen reader users to make sense of the div. Or if I should/shouldn't use a role attribute at all. Any other accesibility, clean code or other improvements advice is very appreciated.

I had trouble with the overflow of the hover effect on the image. It still doesn't look perfect. You can see it when you use mobile emulation and click the image or when you zoom in large enough on desktop. Any advice / insights / explanations of that problem is more than welcome, together with suggestions for possible accesibility improvements.

Feedback on how to remain proper scaling of the container when zooming out would be welcome. (See css file for the problem I had). When I used flex instead of grid, I could not get both divs within the container to be 50/50 in width even after setting 100% on both.

I'm also not entirely sure if the mobile view is good. When I first view mobile view with the emulation mode, it looks bad, but when I get back to desktop view, and then again back to mobile view, it looks well fitted to the screen size.

I had trouble with proper sizing for the desktop version, it only looks the way I'd want it when you zoom out until 50 or 60-something%. When I add the flex properties (see below) to the body/html tags it still has the same problem. Also when I delete the sizing and positioning properties on the QRcontainer tag, so any feedback on how to improve the desktop view (or the horizontal mobile view) would be more than welcome. Or feedback in general.

{ display: flex; width: 100%; height: max-content; justify-content: center; align-items: center; }