CY

I've learned about the accessible card component that in the HTML we put images after the title, then use order in CSS to arrange the position.

When I started this project I didn't check the design of the desktop version carefully, so I didn't wrap the text together in the HTML, this made using the grid for the large view impossible.

So I used position: absolute to arrange the image and used padding-right to narrow down the space for text.

This is OK, right?

Any suggestion about how to deal with the filter buttons on the desktop or mobile?

For me, the difficult part is the different styles for share buttons on desktop & mobile. My solution is using two snippet code to achieve it, this also makes the javascript more complicated.