images go behind the dates now

src/lib/components/calendar.svelte

@@ -53,15 +53,15 @@
 >
     {#snippet day({ day })}
         <CalendarDay>
-            {day.day}
             {@const img = getImageForDate(day)}
             {#if img}
                 <img
                     src={img}
                     alt=""
-                    class="h-4 w-full rounded-sm object-cover"
+                    class="absolute inset-0 h-full w-full rounded-sm object-cover hover:opacity-20"
                 />
             {/if}
+            <span class="relative z-10 text-white">{day.day}</span>
         </CalendarDay>
     {/snippet}
 </Calendar>

src/lib/components/ui/calendar/calendar-day.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant: "ghost" }),
-		"flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
+		"relative flex flex-1 flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
 		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
 		"data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
 		// Outside months

src/lib/components/ui/calendar/calendar-grid-row.svelte

@@ -9,4 +9,4 @@
 	}: CalendarPrimitive.GridRowProps = $props();
 </script>
 
-<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
+<CalendarPrimitive.GridRow bind:ref class={cn("flex flex-1 gap-1", className)} {...restProps} />