feat: Add experimental reolink media support (#1694)

* feat: Add experimental rich reolink support.

* Formatting fix

src/scss/thumbnail-details.scss

@@ -17,6 +17,7 @@ div.title {
 
 div.details {
   flex: 1;
+  justify-content: space-evenly;
 
   display: flex;
   flex-direction: column;

src/scss/thumbnail-feature-text.scss

@@ -1,14 +1,9 @@
 :host {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  aspect-ratio: 1 / 1;
-  overflow: hidden;
+  display: block;
   max-width: var(--frigate-card-thumbnail-size);
   max-height: var(--frigate-card-thumbnail-size);
-  padding: 10px;
+
+  aspect-ratio: 1 / 1;
 
   border: 1px solid var(--secondary-color);
   background-color: var(--secondary-background-color);
@@ -16,8 +11,41 @@
     --frigate-card-css-border-radius,
     var(--ha-card-border-radius, 4px)
   );
+
+  overflow: hidden;
+  padding: 10px;
+
   box-sizing: border-box;
 
+  // Ensure img.background is relative to this.
+  position: relative;
+}
+
+img.background {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  position: absolute;
+  inset: 0;
+
+  padding: 10%;
+  box-sizing: border-box;
+
+  pointer-events: none;
+
+  opacity: 0.1;
+}
+
+div.content {
+  height: 100%;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
   color: var(--primary-text-color);
 }