feat: Add experimental reolink media support (#1694)

* feat: Add experimental rich reolink support.

* Formatting fix

src/scss/thumbnail-feature-thumbnail.scss

@@ -0,0 +1,49 @@
+:host {
+  display: block;
+  overflow: hidden;
+
+  aspect-ratio: 1 / 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+img {
+  display: block;
+}
+
+img,
+ha-icon {
+  // Safari will occasionally not load thumbnails correctly with display block.
+  display: inline-block;
+
+  // Ensure no whitespace around img with inline-block display.
+  vertical-align: top;
+  margin: 0;
+
+  border-radius: var(
+    --frigate-card-css-border-radius,
+    var(--ha-card-border-radius, 4px)
+  );
+
+  max-width: var(--frigate-card-thumbnail-size);
+  max-height: 100%;
+  aspect-ratio: 1 / 1;
+
+  // Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
+  // should be clipped to fill the thumbnail div whilst maintaining
+  // aspect-ratio.
+  object-fit: cover;
+}
+
+ha-icon {
+  --mdc-icon-size: 50%;
+  color: var(--primary-text-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-sizing: border-box;
+  opacity: 0.2;
+}