Redesign media cards

[Splines]

🌟 Fixes/Features

With this PR, we pimp up the styling of media-related cards, e.g. those for lectures, scripts, quizzes etc.
Highlights are marked in bold.

• Customize the media grid for the cards such that buttons don't break. Also added another 5th column for very large screens
• Use dark blue "MaMpf color" and border to improve contrast ratio of cards
• Use Bootstrap icons for consistency (instead of material icons)
• Make buttons actual buttons. This has many advantages: the buttons now stand out visually, they have an automatic hover effect and the "click area" is the area of the whole button, not just the area of the little icon. Also increase accessibility by actually labeling the anchor links as role="button".
• Decrease size of "Download mp4/pdf" buttons to make other buttons more prominent
• Use light background gradient on cards with colors that better match our "MaMpf blue" in terms of shades
• Add hover effect over the screenshot for the main purpose of the card, e.g. play video, open PDF, play quiz
• Add slight shiny effect below cursor when a card is hovered. This is mostly visible on the beforementioned hover effect over the screenshot.
• Add grid pattern as placeholder for media when no screenshot is present, e.g. for quizzes or for lectures without a screenshot
• Add drop shadow on hover to cards
• Crop screenshots slightly such that scrollbars are not shown in many screenshots

Additionally:

• Also fixed badge hovers (they should not be hoverable except if they are lecture-tags)
• Watchlist entries now use the same layout as the MaMpf cards so that we don't have duplicated code

📷 Screenshots

Before

After

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 2 lines in your changes missing coverage. Please review.

Please upload report for BASE (dev@bf7c6dc). Learn more about missing BASE report.

Files	Patch %	Lines
app/helpers/talks_helper.rb	0.00%	2 Missing ⚠️

Additional details and impacted files

@@          Coverage Diff           @@
##             dev     #656   +/-   ##
======================================
  Coverage       ?   53.09%           
======================================
  Files          ?      153           
  Lines          ?     6614           
  Branches       ?        0           
======================================
  Hits           ?     3512           
  Misses         ?     3102           
  Partials       ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[fosterfarrell9]

LGTM! Looks very nice now. I played around with it a lot and everything works fine.

[Splines]

Thanks ;) Is there anything left to do since you posted this as a comment and not as approval?