Article Preview Component - BEM, Accessibility, CSS Grid, Flexbox

I learned more about relative / absolute positioning in this project as well as putting javascript knowledge into practice. I found it quite difficult at first because the two different styles of pop-up: in the mobile version it slides up and is hidden by the card; overflow: hidden solves this, but then for the desktop view the pop-up gets clipped at the right hand edge of the card. I'm not sure if there is a better option but I solved this by switching overflow on the card back to visible, and rounding the corners and hiding the overflow on the media-box image container when in the desktop view instead; that way the card can keep the appearance of rounded corners but the popup will still be fully visible without clipping to the edge of the card container.