feat: improve spacing overall

components/invite/details-section.tsx

@@ -8,8 +8,8 @@ const expectationImages = ["/images/details_ceremony.png", "/images/details_dinn
 
 export function DetailsSection({ content }: { content: InvitePageContent["details"] }) {
   return (
-    <section id="details" className="bg-wedding-ivory">
+    <section id="details" className="bg-wedding-ivory pt-wedding-section">
-      <WeddingContainer className="py-wedding-section">
+      <WeddingContainer className="">
         <div className="grid gap-10 wedding-lg:grid-cols-2 wedding-lg:items-center">
           <SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
           <div className="relative aspect-video overflow-hidden"><Image src="/images/details_main.png" alt="Luttelforster Muhle venue" fill className="object-cover" sizes="(min-width: 900px) 55vw, 90vw" /></div>

components/invite/faq-section.tsx

@@ -6,7 +6,7 @@ import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
 
 export function FaqSection({ content }: { content: InvitePageContent["faq"] }) {
   return (
-    <section id="faq" className="bg-wedding-ivory py-wedding-section">
+    <section id="faq" className="bg-wedding-ivory pt-wedding-section">
       <WeddingContainer>
         <SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
         <div className="mt-14 grid gap-x-12 wedding-lg:grid-cols-2">

components/invite/feature-split.tsx

@@ -17,7 +17,7 @@ export function FeatureSplit({
       <div
         className={`flex items-center bg-wedding-ivory px-wedding-gutter-mobile py-wedding-section wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop ${reverse ? "wedding-lg:order-2" : ""}`}
       >
-        <div className="mx-auto w-full max-w-md">{children}</div>
+        <div className="wedding-lg:mx-auto w-full max-w-md">{children}</div>
       </div>
       <div className={`relative min-h-96 ${reverse ? "wedding-lg:order-1" : ""}`}>
         <Image className="object-cover" src={image} alt={alt} fill sizes="(min-width: 900px) 60vw, 100vw" />

components/invite/heart-quote.tsx

@@ -1,6 +1,6 @@
 export function HeartQuote({ quote }: { quote: string }) {
   return (
-    <blockquote className="bg-wedding-cream px-wedding-gutter-mobile py-12 text-center wedding-md:px-wedding-gutter-phone">
+    <blockquote className="mt-12 bg-wedding-cream px-wedding-gutter-mobile py-12 text-center wedding-md:px-wedding-gutter-phone">
       <p className="font-wedding-display text-wedding-medium italic leading-wedding-display text-wedding-terracotta">
         “{quote}”
       </p>

components/invite/introduction-section.tsx

@@ -9,7 +9,7 @@ const icons = [CalendarDays, MapPin, Clock3]
 
 export function IntroductionSection({ content }: { content: InvitePageContent["introduction"] }) {
   return (
-    <section id="introduction" className="bg-wedding-ivory py-wedding-section">
+    <section id="introduction" className="bg-wedding-ivory pt-wedding-section">
       <WeddingContainer>
         <Monogram />
         <div className="mt-10 grid gap-10 wedding-lg:grid-cols-2 wedding-lg:items-center">
@@ -26,9 +26,13 @@ export function IntroductionSection({ content }: { content: InvitePageContent["i
         <div className="mt-14 grid border-y border-wedding-line wedding-md:grid-cols-3 wedding-md:border-y-0">
           {content.facts.map((fact, index) => {
             const Icon = icons[index]
-            return <div className={`flex gap-4 px-0 py-7 wedding-md:px-6 wedding-md:py-0 ${index < content.facts.length - 1 ? "wedding-md:border-r wedding-md:border-wedding-line" : ""}`} key={fact.label}>
+            return <div className={`flex gap-4 px-0 py-4 wedding-md:px-6 wedding-md:py-0 ${index < content.facts.length - 1 ? "wedding-md:border-r wedding-md:border-wedding-line" : ""}`} key={fact.label}>
               <Icon className="mt-1 size-5 text-wedding-terracotta" aria-hidden="true" />
-              <div><p className="wedding-section-label">{fact.label}</p><p className="mt-2 font-wedding-display text-wedding-medium">{fact.value}</p>{fact.description ? <p className="mt-1 font-wedding-ui text-sm">{fact.description}</p> : null}</div>
+              <div className="flex flex-col" >
+                <p className="wedding-section-label">{fact.label}</p>
+                <p className="mt-2 wedding-md:h-24 flex items-center justify-center wedding-md:text-center wedding-lg:text-left font-wedding-display text-wedding-medium">{fact.value}</p>
+                {fact.description ? <p className="mt-1 font-wedding-ui wedding-md:text-center wedding-lg:text-left text-sm mt-auto">{fact.description}</p> : null}
+              </div>
             </div>
           })}
         </div>

components/invite/rsvp-section.tsx

@@ -21,7 +21,7 @@ export function RsvpSection(props: {
 }) {
   const message = props.submitted ? props.dictionary.form.submitted : props.error === "closed" ? props.dictionary.errors.closed : props.error ? props.dictionary.errors.generic : null
   return (
-    <section id="rsvp" className="bg-wedding-ivory py-wedding-section">
+    <section id="rsvp" className="bg-wedding-ivory pt-wedding-section">
       <WeddingContainer wide>
         <div className="grid gap-14 wedding-lg:grid-cols-2">
           <div><p className="wedding-section-label">{props.content.eyebrow}</p><h2 className="wedding-display-heading mt-5 text-wedding-page">{props.content.heading}</h2><div className="mt-7 w-12 border-t-2 border-wedding-terracotta" /><p className="mt-7 font-wedding-ui text-wedding-body leading-wedding-body">{props.content.paragraph} <strong>{props.content.deadline}</strong>.</p><p className="mt-4 font-wedding-display text-wedding-medium italic text-wedding-terracotta">{props.content.helper}</p><Link className="mt-12 inline-block wedding-text-link" href="#faq">{props.content.faqLink} →</Link></div>

components/invite/schedule-section.tsx

@@ -6,14 +6,14 @@ import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
 
 export function ScheduleSection({ content }: { content: InvitePageContent["schedule"] }) {
   return (
-    <section id="schedule" className="bg-wedding-ivory">
+    <section id="schedule" className="bg-wedding-ivory wedding-lg:pt-wedding-section">
       <FeatureSplit image="/images/schedule.png" alt="Wedding dinner celebration" reverse>
         <SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
         <p className="mt-7 font-wedding-display text-wedding-medium italic text-wedding-terracotta">Nicole & Raul</p>
       </FeatureSplit>
-      <WeddingContainer className="py-wedding-section">
+      <WeddingContainer className="pt-wedding-section">
         <p className="wedding-section-label">{content.label}</p>
-        <div className="mt-10 grid gap-8 wedding-md:grid-cols-2 wedding-lg:grid-cols-6">
+        <div className="mt-10 grid gap-8 wedding-lg:grid-cols-6">
           {content.timeline.map((item) => <article className="border-l border-wedding-line pl-5 wedding-lg:border-l-0 wedding-lg:border-t wedding-lg:pt-6 wedding-lg:pl-0" key={item.time}><span className="-ml-7 block size-3 rounded-full bg-wedding-terracotta wedding-lg:-mt-8 wedding-lg:ml-0" /><p className="mt-4 wedding-section-label">{item.time}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{item.title}</h3><p className="mt-4 font-wedding-ui text-sm leading-wedding-body">{item.description}</p></article>)}
         </div>
       </WeddingContainer>

components/invite/story-section.tsx

@@ -14,7 +14,7 @@ const journeyImages = [
 
 export function StorySection({ content }: { content: InvitePageContent["story"] }) {
   return (
-    <section id="story" className="bg-wedding-ivory">
+    <section id="story" className="bg-wedding-ivory wedding-md:pt-wedding-section">
       <FeatureSplit image="/images/our_story.png" alt="Nicole, Raul and their dog in the countryside">
         <SectionHeading eyebrow={content.eyebrow} heading={content.heading} />
         {content.paragraphs.map((paragraph) => (
@@ -22,7 +22,7 @@ export function StorySection({ content }: { content: InvitePageContent["story"]
         ))}
         <p className="mt-7 font-wedding-display text-wedding-medium italic text-wedding-terracotta">Nicole & Raul</p>
       </FeatureSplit>
-      <WeddingContainer className="py-wedding-section">
+      <WeddingContainer className="pt-wedding-section">
         <p className="wedding-section-label">Our journey</p>
         <div className="mt-12 grid gap-10 wedding-lg:grid-cols-3">
           {content.timeline.map((item, index) => (