style: small design tweaks

src/components/Checkout/DonationItem.vue

@@ -93,7 +93,7 @@
 									class="tw-text-base"
 								>
 									<!-- eslint-disable-next-line max-len -->
-									At Kiva, 100 % of your loan supports the borrower — we never take a fee.As a nonprofit, donations are crucial to advancing our mission of expanding financial access for underserved communities.
+									100% of your loan supports  borrowers — we never take a fee. As a nonprofit, we rely on donations to advance our mission of expanding financial access
 								</p>
 							</div>
 							<button
@@ -207,7 +207,7 @@
 			data-testid="basket-donation-how-kiva-uses-lightbox"
 		>
 			<template #header>
-				<h2 class="tw-text-h1">
+				<h2>
 					Loans change lives. Your donations make them possible.
 				</h2>
 			</template>

src/components/Checkout/DonationNudge/DonationNudgeBoxes.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="donation-nudge-boxes-container">
 		<div
-			class="md:visible tw-text-left tw-mt-4 md:tw-mt-6
+			class="md:visible tw-text-left tw-mt-2 md:tw-mt-3
 			md:tw-flex md:tw-flex-1 md:tw-flex-space-3 md:tw-gap-3"
 		>
 			<div

src/components/Checkout/DonationNudge/DonationNudgeLightbox.vue

@@ -8,7 +8,7 @@
 		:title="title"
 	>
 		<template #header>
-			<h2 v-if="!zeroUpsellVisible" class="tw-text-h1 tw-flex-1">
+			<h2 v-if="!zeroUpsellVisible" class="tw-flex-1">
 				{{ title }}
 			</h2>
 			<div v-if="zeroUpsellVisible" class="tw-pl-4 tw-flex tw-flex-col tw-items-center">

src/components/Checkout/HowKivaUsesDonation.vue

@@ -1,31 +1,28 @@
 <template>
 	<div ref="content" class="tw-prose tw-text-base">
 		<p>
-			<!-- eslint-disable-next-line max-len -->
-			At Kiva, 100% of every loan supports the borrower — we never take a fee. As a nonprofit, our work is dependent on donations from supporters like you. Every single dollar donated helps Kiva:
+			At Kiva, 100% of every loan supports borrowers — we never take a fee.
 		</p>
 		<div class="tw-flex tw-flex-col tw-gap-2">
-			<div class="tw-flex tw-justify-start tw-items-center tw-gap-2 tw-not-prose">
+			<div class="item-container tw-not-prose">
 				<img
-					:src="imageRequire(`./globe.svg`)" alt="global real impact icon"
-					class="tw-w-7 lg:tw-w-8 tw-h-8 tw-inline-block"
+					:src="imageRequire(`./support.svg`)" alt="donation support"
 				>
 				<!-- eslint-disable-next-line max-len -->
 				<p>Ensure fair and responsible lending practices that deliver real impact for underserved individuals</p>
 			</div>
-			<div class="tw-flex tw-justify-start tw-items-center tw-gap-2 tw-not-prose">
+			<div class="item-container tw-not-prose">
 				<img
-					:src="imageRequire(`./puzzle.svg`)" alt="donation partners"
-					class="tw-w-7 lg:tw-w-8 tw-h-8 tw-inline-block"
+					:src="imageRequire(`./globe.svg`)" alt="global real impact icon"
 				>
 				<!-- eslint-disable-next-line max-len -->
 				<p>Sustain the infrastructure needed to distribute $1M in loans each week to borrowers around the world</p>
 			</div>
-			<div class="tw-flex tw-justify-start tw-items-center tw-gap-2 tw-not-prose">
+			<div class="item-container tw-not-prose">
 				<img
-					:src="imageRequire(`./support.svg`)" alt="donation support"
-					class="tw-w-7 lg:tw-w-8 tw-h-8 tw-inline-block"
+					:src="imageRequire(`./puzzle.svg`)" alt="donation partners"
 				>
+				<!-- eslint-disable-next-line max-len -->
 				<p>Partner with impact-first organizations operating directly in the communities Kiva serves</p>
 			</div>
 		</div>
@@ -43,3 +40,14 @@ export default {
 	}
 };
 </script>
+
+<style lang="postcss" scoped>
+.item-container {
+	@apply tw-flex tw-justify-start tw-items-center tw-gap-2;
+}
+
+.item-container img {
+	@apply tw-w-7 lg:tw-w-8 tw-h-8 tw-inline-block;
+}
+
+</style>