not sure what these changes are...

src/components/details/details.module.css

@@ -1,6 +1,6 @@
 .container {
   isolation: isolate;
-    display: block grid;
+  display: block grid;
 
   container-type: inline-size;
 }
@@ -14,8 +14,11 @@
     position: absolute;
     inset: 0;
     display: block;
-    background: linear-gradient(182.5deg, transparent 20%, var(--surface-2) 90%),
-      linear-gradient(transparent 50%, #0007 75%);
+    background: linear-gradient(
+      calc(atan(var(--ratio))),
+      var(--surface-2) 20em,
+      transparent 90%
+    );
   }
 
   & > .background {
@@ -28,4 +31,3 @@
     z-index: 0;
   }
 }
-

src/components/details/details.tsx

@@ -1,19 +1,38 @@
-import { Component } from 'solid-js';
-import { Entry } from '~/features/content';
-import css from './details.module.css';
+import { Component, createSignal, onCleanup, onMount } from "solid-js";
+import { Entry } from "~/features/content";
+import css from "./details.module.css";
 
 interface DetailsProps {
-    entry: Entry
+  entry: Entry;
 }
 
 export const Details: Component<DetailsProps> = (props) => {
-    return (
-        <div class={css.container}>
-            <header class={css.header}>
-                <img class={css.background} src={props.entry.image} />
+  const [header, setHeader] = createSignal<HTMLElement>();
 
-                <h1>{props.entry.title}</h1>
-            </header>
-        </div>
-    );
+  onMount(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      const _20em = 20 * 16;
+      const { inlineSize, blockSize } = entry.contentBoxSize[0];
+      console.log(blockSize / inlineSize);
+
+      (entry.target as HTMLElement).style.setProperty(
+        "--ratio",
+        String(_20em / inlineSize),
+      );
+    });
+
+    observer.observe(header()!);
+
+    onCleanup(() => observer.disconnect());
+  });
+
+  return (
+    <div class={css.container}>
+      <header ref={setHeader} class={css.header}>
+        <img class={css.background} src={props.entry.image} />
+
+        <h1>{props.entry.title}</h1>
+      </header>
+    </div>
+  );
 };

src/features/content/apis/jellyfin.ts

@@ -24,7 +24,6 @@ const getBaseUrl = () => {
   return process.env.JELLYFIN_BASE_URL;
 };
 
-
 const getClient = () => {
   "use server";
 
@@ -34,11 +33,11 @@ const getClient = () => {
       Authorization: `MediaBrowser DeviceId="Streamarr", Token="${process.env.JELLYFIN_API_KEY}"`,
       "Content-Type": 'application/json; profile="CamelCase"',
     },
-  })
+  });
 };
 
 export const getCurrentUser = query(async () => {
-    "use server";
+  "use server";
 
   const { data, error, response } = await getClient().GET("/Users/Public", {
     params: {},
@@ -48,7 +47,7 @@ export const getCurrentUser = query(async () => {
 }, "jellyfin.getCurrentUser");
 
 export const listUsers = query(async () => {
-    "use server";
+  "use server";
 
   const { data, error } = await getClient().GET("/Users", {
     params: {},
@@ -99,8 +98,8 @@ export const getRandomItem = query(
   async (userId: string): Promise<Entry | undefined> => {
     "use server";
 
-      return getRandomItems(userId, 1).then((items) => items?.at(0));
-    },
+    return getRandomItems(userId, 1).then((items) => items?.at(0));
+  },
   "jellyfin.listRandomItem",
 );
 
@@ -267,7 +266,7 @@ export const getItemPlaybackInfo = query(
 );
 
 export const queryItems = query(async () => {
-    "use server";
+  "use server";
 
   const { data, error } = await getClient().GET("/Items", {
     params: {