Opengraph link fix (issue #4492)

Putting this up for testing and code review. It's a WIP.

This PR is for issue #4492, and stops the og:description text from being included in the <a> field and therefore being a link.

However, for reasons I can't quite work out, the og:description still does appear as part of the link in the mobile version. This seems quite useful, because it gives more area for the user to tap on a touch-screen device. However, I'm aware this might be happening because of an error in the coding, so I'd be grateful if a CSS guru such as @Flaburgan would have look at it at some point.

I had to use a different hierarchy of styles in the desktop and mobile CSS. Again, I don't know why, but it works this way, and doesn't work properly if they are given the same hierarchy. Again, if someone would confirm that they are OK as they are, or that need changing, that would be great.

(I don't know why the indentation is a bit wonky in some of the files displayed below - it's fine when viewed in my text editor.)