more fluent design

src/routes/weather/week/[location]/MeteogramCharts.svelte

@@ -153,7 +153,7 @@
 	);
 </script>
 
-<section class="mt-8" in:fade={{ duration: 200 }}>
+<section class="mt-8" transition:fade={{ duration: 200 }}>
 	<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
 		<h3 class="text-lg font-bold">
 			Meteograms
@@ -239,7 +239,7 @@
 	{:else}
 		<!-- one full-bleed card on mobile / contained card on md+, graphs stacked
 		     tightly so they read as one fluent meteogram -->
-		<div class="-mx-5 border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border">
+		<div class="-mx-3 border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border">
 			{#each renderPanels as panel, i (panel.id)}
 				<div
 					class="px-0 pt-2 pb-1 md:px-4 {i > 0 ? 'border-t border-border/50' : 'md:pt-4'} {i ===