fix: visual fixes

src/lib/css/app.scss

@@ -318,14 +318,17 @@ body {
 
 .hoverable {
 	@apply hover:scale-105 duration-200;
+	will-change: transform;
 }
 
 .hoverable-md {
 	@apply hover:scale-110 duration-200;
+	will-change: transform;
 }
 
 .hoverable-lg {
 	@apply hover:scale-[1.15] duration-200;
+	will-change: transform;
 }
 
 .selected {

src/lib/sections/about/Donate.svelte

@@ -210,22 +210,23 @@
 				Monthly
 			</button>
 		</div>
-		<div class="flex gap-3 w-full">
-			{#each presetAmounts as preset}
+		<div class="grid grid-cols-4 gap-3 w-full">
+			{#each presetAmounts as preset, i}
 				<button
 					onclick={() => amountClick(preset)}
 					class={clsx(
-						"btn flex-1 p-4 rounded-lg flex items-center justify-center",
+						"btn p-4 rounded-lg flex items-center justify-center",
 						{
 							"!scale-100": !$effects,
 							"bg-accent-red text-black": amount === preset,
 						},
 					)}
+					style={i === 2 ? "grid-column: 3;" : ""}
 				>
 					${preset} USD
 				</button>
 			{/each}
-			<div class="flex-[2] flex items-center justify-center">
+			<div class="flex items-center justify-center">
 				<FancyInput
 					bind:value={customAmount}
 					placeholder="Custom"

src/routes/+page.svelte

@@ -115,7 +115,6 @@
 					</div>
 
 					<div class="file-category-card-content flex-grow gap-4">
-						<div class="flex flex-col gap-1">
 						{#if key === "Video"}
 							<p>
 								Video uploads to a server for processing by
@@ -126,9 +125,7 @@
 								>.
 							</p>
 						{:else}
-								<p
-									class="flex tems-center justify-center gap-2"
-								>
+							<p class="flex tems-center justify-center gap-2">
 								<Check size="20" /> Local fully supported
 							</p>
 						{/if}
@@ -136,7 +133,6 @@
 							<b>Status: </b>
 							{s.ready ? "ready" : "not ready"}
 						</p>
-						</div>
 						<div>
 							<span class="flex flex-wrap justify-center">
 								<b>Supported formats:&nbsp;</b>