remove background on media

src/app/components/ContentLinkBlock.svelte

@@ -22,42 +22,41 @@
   const expand = () => pushModal(ContentLinkDetail, {url}, {fullscreen: true})
 </script>
 
-<Link
+<Link external href={url} class="my-2 flex">
-  external
+  <div class="overflow-hidden rounded-box leading-[0]">
-  href={url}
+    {#if url.match(/\.(mov|webm|mp4)$/)}
-  style="background-color: rgba(15, 15, 14, 0.5)"
+      <video controls src={url} class="max-h-96 object-contain object-center">
-  class="relative my-2 flex w-full flex-grow flex-col overflow-hidden rounded-xl">
+        <track kind="captions" />
-  {#if url.match(/\.(mov|webm|mp4)$/)}
+      </video>
-    <video controls src={url} class="max-h-96 object-contain object-center">
+    {:else if url.match(/\.(jpe?g|png|gif|webp)$/)}
-      <track kind="captions" />
+      <button type="button" on:click|stopPropagation|preventDefault={expand}>
-    </video>
+        <img alt="Link preview" src={imgproxy(url)} class="m-auto max-h-96" />
-  {:else if url.match(/\.(jpe?g|png|gif|webp)$/)}
+      </button>
-    <button type="button" on:click|stopPropagation|preventDefault={expand}>
+    {:else}
-      <img alt="Link preview" src={imgproxy(url)} class="m-auto max-h-96" />
+      {#await loadPreview()}
-    </button>
+        <div class="center my-12 w-full">
-  {:else}
+          <span class="loading loading-spinner" />
-    {#await loadPreview()}
-      <div class="center my-12 w-full">
-        <span class="loading loading-spinner" />
-      </div>
-    {:then preview}
-      {#if preview.image}
-        <img
-          alt="Link preview"
-          src={imgproxy(preview.image)}
-          class="max-h-96 object-contain object-center" />
-      {/if}
-      <div class="h-px" />
-      {#if preview.title}
-        <div class="flex flex-col px-4 py-2">
-          <strong class="overflow-hidden text-ellipsis whitespace-nowrap">{preview.title}</strong>
-          <small>{ellipsize(preview.description, 140)}</small>
         </div>
-      {/if}
+      {:then preview}
-    {:catch}
+        <div class="bg-alt flex flex-col max-w-xl leading-normal">
-      <p class="mb-1 p-12 text-center">
+          {#if preview.image}
-        Unable to load a preview for {url}
+            <img
-      </p>
+              alt="Link preview"
-    {/await}
+              src={imgproxy(preview.image)}
-  {/if}
+              class="max-h-72 object-contain object-center bg-alt" />
+          {/if}
+          {#if preview.title}
+            <div class="flex flex-col gap-2 p-4">
+              <strong class="overflow-hidden text-ellipsis whitespace-nowrap">{preview.title}</strong>
+              <p>{ellipsize(preview.description, 140)}</p>
+            </div>
+          {/if}
+        </div>
+      {:catch}
+        <p class="p-12 text-center bg-alt">
+          Unable to load a preview for {url}
+        </p>
+      {/await}
+    {/if}
+  </div>
 </Link>