fix: background using twMerge

src/layouts/CocktailCard.astro

@@ -1,16 +1,22 @@
 ---
-import { twMerge } from "tailwind-merge";
+import {twMerge} from "tailwind-merge"
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import Card from "@/components/story/Card.tsx";
 import ButtonSet from "@/components/story/ButtonSet.tsx";
 import FooterDecorator from "@/components/story/FooterDecorator.tsx";
 import Logo from "@/assets/elements/logo.png";
 
 const { id, name, img, bgbox, bg, accent, download } = Astro.props;
-const classname = twMerge(
-  `relative flex w-full flex-col items-center justify-center gap-4 overflow-hidden bg-cover bg-repeat pb-8`,
-  `bg-${bg}`
-);
+
+const background = {
+    raspberry: "bg-raspberry",
+    cosmo: "bg-cosmo",
+    pina: "bg-pina",
+    gin: "bg-gin",
+    lagoon: "bg-lagoon",
+    lalemon: "bg-lalemon",
+};
+const classname = twMerge(`relative flex w-full flex-col items-center justify-center gap-4 overflow-hidden bg-cover bg-repeat pb-8`,background[bg]);
 ---
 
 <BaseLayout>