From fc16acea61e7bf1caa8705713c6f9f1ad1f39b0f Mon Sep 17 00:00:00 2001
From: Raul Lugo <rlugo14@gmail.com>
Date: Sun, 6 Sep 2026 13:02:03 +0200
Subject: [PATCH] refactor: token layout names

---
 app/globals.css                            |  4 ++--
 components/invite/details-section.tsx      | 12 ++++++------
 components/invite/faq-section.tsx          |  4 ++--
 components/invite/feature-split.tsx        |  6 +++---
 components/invite/heart-quote.tsx          |  2 +-
 components/invite/hero-section.tsx         |  6 +++---
 components/invite/introduction-section.tsx |  6 +++---
 components/invite/photo-upload.tsx         |  6 +++---
 components/invite/rsvp-guest-fields.tsx    |  6 +++---
 components/invite/rsvp-section.tsx         |  2 +-
 components/invite/rsvp-toast-fields.tsx    |  4 ++--
 components/invite/rsvp-travel-fields.tsx   | 10 +++++-----
 components/invite/schedule-section.tsx     |  4 ++--
 components/invite/site-header.tsx          |  6 +++---
 components/invite/story-section.tsx        |  6 +++---
 components/invite/wedding-container.tsx    |  2 +-
 16 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 7ac1e8c..0155d7e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -32,8 +32,8 @@
 }
 
 @theme inline {
-  --breakpoint-wedding-layout: 56.25rem;
-  --breakpoint-wedding-phone: 37.5rem;
+  --breakpoint-wedding-lg: 56.25rem;
+  --breakpoint-wedding-md: 37.5rem;
   --container-wedding-content: 80rem;
   --spacing-wedding-gutter-mobile: 1.5rem;
   --spacing-wedding-gutter-phone: 2rem;
diff --git a/components/invite/details-section.tsx b/components/invite/details-section.tsx
index d8dfca5..aadc251 100644
--- a/components/invite/details-section.tsx
+++ b/components/invite/details-section.tsx
@@ -10,18 +10,18 @@ export function DetailsSection({ content }: { content: InvitePageContent["detail
   return (
     <section id="details" className="bg-wedding-ivory">
       <WeddingContainer className="py-wedding-section">
-        <div className="grid gap-10 wedding-layout:grid-cols-2 wedding-layout:items-center">
+        <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>
         </div>
-        <div className="mt-14 grid divide-y divide-wedding-line border-y border-wedding-line wedding-phone:grid-cols-3 wedding-phone:divide-x wedding-phone:divide-y-0 wedding-phone:border-y-0">
-          {content.facts.map((fact, index) => <article className="py-7 wedding-phone:px-6 wedding-phone:py-0" key={fact.label}><p className="wedding-section-label">0{index + 1} · {fact.label}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{fact.value}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{fact.description}</p></article>)}
+        <div className="mt-14 grid divide-y divide-wedding-line border-y border-wedding-line wedding-md:grid-cols-3 wedding-md:divide-x wedding-md:divide-y-0 wedding-md:border-y-0">
+          {content.facts.map((fact, index) => <article className="py-7 wedding-md:px-6 wedding-md:py-0" key={fact.label}><p className="wedding-section-label">0{index + 1} · {fact.label}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{fact.value}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{fact.description}</p></article>)}
         </div>
-        <div className="mt-16 grid gap-8 wedding-phone:grid-cols-2">
+        <div className="mt-16 grid gap-8 wedding-md:grid-cols-2">
           {content.expectations.map((item, index) => <article key={item.label}><div className="relative aspect-video overflow-hidden"><Image src={expectationImages[index]} alt={item.label} fill className="object-cover" sizes="(min-width: 600px) 45vw, 90vw" /></div><h3 className="mt-5 font-wedding-display text-wedding-medium">{item.label}</h3><p className="mt-2 font-wedding-ui text-wedding-body">{item.value}</p><p className="mt-1 font-wedding-ui text-sm">{item.description}</p></article>)}
         </div>
-        <div className="mt-16 bg-wedding-cream p-8 wedding-phone:p-12"><p className="wedding-section-label">{content.dressCode.label}</p><h3 className="mt-4 font-wedding-display text-wedding-section">{content.dressCode.value}</h3><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{content.dressCode.description}</p></div>
-        <div className="mt-16 grid gap-8 wedding-phone:grid-cols-2 wedding-layout:grid-cols-5">
+        <div className="mt-16 bg-wedding-cream p-8 wedding-md:p-12"><p className="wedding-section-label">{content.dressCode.label}</p><h3 className="mt-4 font-wedding-display text-wedding-section">{content.dressCode.value}</h3><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{content.dressCode.description}</p></div>
+        <div className="mt-16 grid gap-8 wedding-md:grid-cols-2 wedding-lg:grid-cols-5">
           {content.policies.map((policy) => <article className="border-l border-wedding-line pl-5" key={policy.title}><h3 className="font-wedding-display text-wedding-medium">{policy.title}</h3><p className="mt-3 font-wedding-ui text-sm leading-wedding-body">{policy.description}</p></article>)}
         </div>
       </WeddingContainer>
diff --git a/components/invite/faq-section.tsx b/components/invite/faq-section.tsx
index 2fca0bc..296ef4a 100644
--- a/components/invite/faq-section.tsx
+++ b/components/invite/faq-section.tsx
@@ -9,10 +9,10 @@ export function FaqSection({ content }: { content: InvitePageContent["faq"] }) {
     <section id="faq" className="bg-wedding-ivory py-wedding-section">
       <WeddingContainer>
         <SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
-        <div className="mt-14 grid gap-x-12 wedding-layout:grid-cols-2">
+        <div className="mt-14 grid gap-x-12 wedding-lg:grid-cols-2">
           {content.questions.map((item) => <details className="group border-b border-wedding-line py-6" key={item.question}><summary className="flex cursor-pointer list-none items-start justify-between gap-6 font-wedding-display text-wedding-medium"><span>{item.question}</span><span className="font-wedding-ui text-wedding-label text-wedding-terracotta transition-transform group-open:rotate-45">+</span></summary><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{item.answer}</p></details>)}
         </div>
-        <aside className="mt-16 flex flex-col gap-5 bg-wedding-cream p-8 wedding-phone:flex-row wedding-phone:items-center wedding-phone:justify-between wedding-phone:p-12">
+        <aside className="mt-16 flex flex-col gap-5 bg-wedding-cream p-8 wedding-md:flex-row wedding-md:items-center wedding-md:justify-between wedding-md:p-12">
           <div><h3 className="font-wedding-display text-wedding-medium">{content.contact.heading}</h3><p className="mt-2 font-wedding-ui text-wedding-body">{content.contact.description}</p></div>
           <Link className="wedding-text-link" href="mailto:hello@example.com">{content.contact.action} →</Link>
         </aside>
diff --git a/components/invite/feature-split.tsx b/components/invite/feature-split.tsx
index 42195ee..b7b9bab 100644
--- a/components/invite/feature-split.tsx
+++ b/components/invite/feature-split.tsx
@@ -13,13 +13,13 @@ export function FeatureSplit({
   reverse?: boolean
 }) {
   return (
-    <div className="grid wedding-layout:grid-cols-2">
+    <div className="grid wedding-lg:grid-cols-2">
       <div
-        className={`flex items-center bg-wedding-ivory px-wedding-gutter-mobile py-wedding-section wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop ${reverse ? "wedding-layout:order-2" : ""}`}
+        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>
-      <div className={`relative min-h-96 ${reverse ? "wedding-layout:order-1" : ""}`}>
+      <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" />
       </div>
     </div>
diff --git a/components/invite/heart-quote.tsx b/components/invite/heart-quote.tsx
index 79c20e9..d70363f 100644
--- a/components/invite/heart-quote.tsx
+++ b/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-phone:px-wedding-gutter-phone">
+    <blockquote className="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>
diff --git a/components/invite/hero-section.tsx b/components/invite/hero-section.tsx
index c06d43a..3523a7b 100644
--- a/components/invite/hero-section.tsx
+++ b/components/invite/hero-section.tsx
@@ -7,12 +7,12 @@ import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
 export function HeroSection({ content }: { content: InvitePageContent["hero"] }) {
   return (
     <section id="top" className="relative isolate flex min-h-screen items-end overflow-hidden bg-wedding-ink text-wedding-white">
-      <Image className="object-cover wedding-layout:hidden" src="/images/hero_mobile.png" alt="Nicole and Raul" fill priority sizes="100vw" />
-      <Image className="hidden object-cover wedding-layout:block" src="/images/hero_desktop.png" alt="Nicole and Raul" fill priority sizes="100vw" />
+      <Image className="object-cover wedding-lg:hidden" src="/images/hero_mobile.png" alt="Nicole and Raul" fill priority sizes="100vw" />
+      <Image className="hidden object-cover wedding-lg:block" src="/images/hero_desktop.png" alt="Nicole and Raul" fill priority sizes="100vw" />
       <div className="absolute inset-0 bg-gradient-to-r from-wedding-ink/75 via-wedding-ink/30 to-transparent" />
       <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-wedding-ink/65 to-transparent" />
       <SiteHeader />
-      <div className="relative z-10 w-full px-wedding-gutter-mobile pb-16 wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop wedding-layout:pb-24">
+      <div className="relative z-10 w-full px-wedding-gutter-mobile pb-16 wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop wedding-lg:pb-24">
         <p className="font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label">{content.eyebrow}</p>
         <h1 className="wedding-display-heading mt-6 max-w-5xl text-wedding-hero leading-none text-wedding-white">
           {content.title}
diff --git a/components/invite/introduction-section.tsx b/components/invite/introduction-section.tsx
index b992d06..509a4b5 100644
--- a/components/invite/introduction-section.tsx
+++ b/components/invite/introduction-section.tsx
@@ -12,7 +12,7 @@ export function IntroductionSection({ content }: { content: InvitePageContent["i
     <section id="introduction" className="bg-wedding-ivory py-wedding-section">
       <WeddingContainer>
         <Monogram />
-        <div className="mt-10 grid gap-10 wedding-layout:grid-cols-2 wedding-layout:items-center">
+        <div className="mt-10 grid gap-10 wedding-lg:grid-cols-2 wedding-lg:items-center">
           <div>
             <h2 className="wedding-display-heading text-wedding-page text-wedding-ink">{content.heading}</h2>
             <div className="mt-7 w-12 border-t-2 border-wedding-terracotta" />
@@ -23,10 +23,10 @@ export function IntroductionSection({ content }: { content: InvitePageContent["i
             <Image src="/images/schedule.png" alt="A candlelit wedding reception" fill className="object-cover" sizes="(min-width: 900px) 40vw, 90vw" />
           </div>
         </div>
-        <div className="mt-14 grid border-y border-wedding-line wedding-phone:grid-cols-3 wedding-phone:border-y-0">
+        <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-phone:px-6 wedding-phone:py-0 ${index < content.facts.length - 1 ? "wedding-phone:border-r wedding-phone:border-wedding-line" : ""}`} key={fact.label}>
+            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}>
               <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>
diff --git a/components/invite/photo-upload.tsx b/components/invite/photo-upload.tsx
index e697c3a..f337904 100644
--- a/components/invite/photo-upload.tsx
+++ b/components/invite/photo-upload.tsx
@@ -100,7 +100,7 @@ export function PhotoUpload({
 
   return (
     <section className="border-t border-wedding-line pt-10">
-      <div className="grid gap-4 wedding-layout:grid-cols-3">
+      <div className="grid gap-4 wedding-lg:grid-cols-3">
         <p className="wedding-section-label">04</p>
         <div>
           <h2 className="font-wedding-display text-wedding-medium">{labels.title}</h2>
@@ -109,7 +109,7 @@ export function PhotoUpload({
         <p className="font-wedding-ui text-sm">{labels.requirements}</p>
       </div>
 
-      <div className="mt-6 wedding-layout:ml-60">
+      <div className="mt-6 wedding-lg:ml-60">
         {filename ? (
           <p className="bg-wedding-cream px-4 py-3 font-wedding-ui text-sm text-wedding-ink">
             {labels.current.replace("{filename}", filename)}
@@ -121,7 +121,7 @@ export function PhotoUpload({
             {labels.disabled}
           </p>
         ) : (
-          <div className="mt-4 flex flex-col gap-4 wedding-phone:flex-row wedding-phone:items-end">
+          <div className="mt-4 flex flex-col gap-4 wedding-md:flex-row wedding-md:items-end">
             <label className="flex-1 font-wedding-ui text-sm">
               <span>{labels.choose}</span>
               <input
diff --git a/components/invite/rsvp-guest-fields.tsx b/components/invite/rsvp-guest-fields.tsx
index fdd9d93..fc15b63 100644
--- a/components/invite/rsvp-guest-fields.tsx
+++ b/components/invite/rsvp-guest-fields.tsx
@@ -16,14 +16,14 @@ export function RsvpGuestFields({
   return (
     <section className="border-t border-wedding-line pt-10">
       {members.map((member, index) => (
-        <fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled} key={member.id}>
+        <fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-lg:grid-cols-3" disabled={disabled} key={member.id}>
           <legend className="sr-only">{member.name}</legend>
           <p className="wedding-section-label">0{index + 1}</p>
           <div><h3 className="font-wedding-display text-wedding-medium">{member.name}</h3><p className="mt-2 font-wedding-ui text-sm">{dictionary.form.attending}</p></div>
-          <div className="grid gap-6 wedding-phone:grid-cols-2">
+          <div className="grid gap-6 wedding-md:grid-cols-2">
             <div className="flex gap-3"><label className="flex flex-1 cursor-pointer items-center justify-center border border-wedding-line p-3 font-wedding-display text-lg"><input className="sr-only" type="radio" name={`attending-${member.id}`} value="yes" defaultChecked={member.attending === true} required />{dictionary.form.yes}</label><label className="flex flex-1 cursor-pointer items-center justify-center border border-wedding-line p-3 font-wedding-display text-lg"><input className="sr-only" type="radio" name={`attending-${member.id}`} value="no" defaultChecked={member.attending === false} required />{dictionary.form.no}</label></div>
             <label className="font-wedding-ui text-sm"><span>{dictionary.form.mealPreference}</span><select name={`meal-${member.id}`} defaultValue={member.meal_preference ?? ""} className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3"><option value="">{dictionary.form.mealPlaceholder}</option>{mealOptions.map((meal) => <option key={meal} value={meal}>{dictionary.meals[meal]}</option>)}</select></label>
-            <label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.dietaryRestrictions}</span><input name={`dietary-${member.id}`} defaultValue={member.dietary_restrictions ?? ""} placeholder={dictionary.form.noRestrictions} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
+            <label className="font-wedding-ui text-sm wedding-md:col-span-2"><span>{dictionary.form.dietaryRestrictions}</span><input name={`dietary-${member.id}`} defaultValue={member.dietary_restrictions ?? ""} placeholder={dictionary.form.noRestrictions} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
           </div>
         </fieldset>
       ))}
diff --git a/components/invite/rsvp-section.tsx b/components/invite/rsvp-section.tsx
index 4c2861d..106f5d4 100644
--- a/components/invite/rsvp-section.tsx
+++ b/components/invite/rsvp-section.tsx
@@ -23,7 +23,7 @@ export function RsvpSection(props: {
   return (
     <section id="rsvp" className="bg-wedding-ivory py-wedding-section">
       <WeddingContainer wide>
-        <div className="grid gap-14 wedding-layout:grid-cols-2">
+        <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>
           <div>{message ? <p aria-live="polite" className="border border-wedding-line bg-wedding-cream p-5 font-wedding-ui text-sm">{message}</p> : null}<RsvpForm {...props} /></div>
         </div>
diff --git a/components/invite/rsvp-toast-fields.tsx b/components/invite/rsvp-toast-fields.tsx
index 4bac874..a5beb1c 100644
--- a/components/invite/rsvp-toast-fields.tsx
+++ b/components/invite/rsvp-toast-fields.tsx
@@ -19,13 +19,13 @@ export function RsvpToastFields({
   const [enabled, setEnabled] = useState(Boolean(toastRequest))
 
   return (
-    <fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled}>
+    <fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-lg:grid-cols-3" disabled={disabled}>
       <legend className="sr-only">{dictionary.interactions.toastTitle}</legend>
       <p className="wedding-section-label">03</p>
       <div><h3 className="font-wedding-display text-wedding-medium">{dictionary.interactions.toastTitle}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{dictionary.interactions.toastDescription}</p></div>
       <div>
         <label className="flex items-center gap-3 font-wedding-ui text-sm"><input type="checkbox" name="wantsToast" checked={enabled} onChange={(event) => setEnabled(event.target.checked)} />{dictionary.interactions.wantsToast}</label>
-        <div className="mt-6 grid gap-6 wedding-phone:grid-cols-2">
+        <div className="mt-6 grid gap-6 wedding-md:grid-cols-2">
           <label className="font-wedding-ui text-sm"><span>{dictionary.interactions.speakerName}</span><input name="toastSpeakerName" disabled={!enabled} defaultValue={toastRequest?.speaker_name ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3 disabled:opacity-50" /></label>
           <label className="font-wedding-ui text-sm"><span>{dictionary.interactions.estimatedMinutes}</span><input name="toastEstimatedMinutes" type="number" min="1" disabled={!enabled} defaultValue={toastRequest?.estimated_minutes ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3 disabled:opacity-50" /></label>
         </div>
diff --git a/components/invite/rsvp-travel-fields.tsx b/components/invite/rsvp-travel-fields.tsx
index b7ce656..9c88d7a 100644
--- a/components/invite/rsvp-travel-fields.tsx
+++ b/components/invite/rsvp-travel-fields.tsx
@@ -15,16 +15,16 @@ export function RsvpTravelFields({
   disabled: boolean
 }) {
   return (
-    <fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled}>
+    <fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-lg:grid-cols-3" disabled={disabled}>
       <legend className="sr-only">{dictionary.sections.travel}</legend>
       <p className="wedding-section-label">02</p>
       <div><h3 className="font-wedding-display text-wedding-medium">{dictionary.sections.travel}</h3></div>
-      <div className="grid gap-6 wedding-phone:grid-cols-2">
+      <div className="grid gap-6 wedding-md:grid-cols-2">
         <label className="font-wedding-ui text-sm"><span>{dictionary.form.arrivalDate}</span><input type="date" name="arrivalDate" defaultValue={dateValue(response?.arrival_date)} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
         <label className="font-wedding-ui text-sm"><span>{dictionary.form.departureDate}</span><input type="date" name="departureDate" defaultValue={dateValue(response?.departure_date)} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
-        <label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.stayLocation}</span><input name="stayLocation" defaultValue={response?.stay_location ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
-        <div className="wedding-phone:col-span-2"><p className="font-wedding-ui text-sm">{dictionary.form.needsTransportHelp}</p><div className="mt-3 flex gap-6 font-wedding-ui text-sm"><label><input type="radio" name="needsTransportHelp" value="yes" defaultChecked={response?.needs_transport_help === true} /> {dictionary.form.yes}</label><label><input type="radio" name="needsTransportHelp" value="no" defaultChecked={response?.needs_transport_help === false} /> {dictionary.form.no}</label></div></div>
-        <label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.messageToCouple}</span><textarea name="messageToCouple" defaultValue={response?.message_to_couple ?? ""} rows={4} className="mt-2 w-full border border-wedding-line bg-transparent p-3" /></label>
+        <label className="font-wedding-ui text-sm wedding-md:col-span-2"><span>{dictionary.form.stayLocation}</span><input name="stayLocation" defaultValue={response?.stay_location ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
+        <div className="wedding-md:col-span-2"><p className="font-wedding-ui text-sm">{dictionary.form.needsTransportHelp}</p><div className="mt-3 flex gap-6 font-wedding-ui text-sm"><label><input type="radio" name="needsTransportHelp" value="yes" defaultChecked={response?.needs_transport_help === true} /> {dictionary.form.yes}</label><label><input type="radio" name="needsTransportHelp" value="no" defaultChecked={response?.needs_transport_help === false} /> {dictionary.form.no}</label></div></div>
+        <label className="font-wedding-ui text-sm wedding-md:col-span-2"><span>{dictionary.form.messageToCouple}</span><textarea name="messageToCouple" defaultValue={response?.message_to_couple ?? ""} rows={4} className="mt-2 w-full border border-wedding-line bg-transparent p-3" /></label>
       </div>
     </fieldset>
   )
diff --git a/components/invite/schedule-section.tsx b/components/invite/schedule-section.tsx
index 085e0bc..bbe4184 100644
--- a/components/invite/schedule-section.tsx
+++ b/components/invite/schedule-section.tsx
@@ -13,8 +13,8 @@ export function ScheduleSection({ content }: { content: InvitePageContent["sched
       </FeatureSplit>
       <WeddingContainer className="py-wedding-section">
         <p className="wedding-section-label">{content.label}</p>
-        <div className="mt-10 grid gap-8 wedding-phone:grid-cols-2 wedding-layout:grid-cols-6">
-          {content.timeline.map((item) => <article className="border-l border-wedding-line pl-5 wedding-layout:border-l-0 wedding-layout:border-t wedding-layout:pt-6 wedding-layout:pl-0" key={item.time}><span className="-ml-7 block size-3 rounded-full bg-wedding-terracotta wedding-layout:-mt-8 wedding-layout: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 className="mt-10 grid gap-8 wedding-md:grid-cols-2 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>
       <HeartQuote quote={content.quote} />
diff --git a/components/invite/site-header.tsx b/components/invite/site-header.tsx
index 49861ec..49439f2 100644
--- a/components/invite/site-header.tsx
+++ b/components/invite/site-header.tsx
@@ -13,12 +13,12 @@ const links = [
 
 export function SiteHeader() {
   return (
-    <header className="absolute inset-x-0 top-0 z-20 px-wedding-gutter-mobile py-6 wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop">
+    <header className="absolute inset-x-0 top-0 z-20 px-wedding-gutter-mobile py-6 wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop">
       <div className="flex items-center justify-between">
         <Link href="#top" aria-label="Back to top">
           <Monogram light />
         </Link>
-        <nav aria-label="Invitation sections" className="hidden wedding-layout:block">
+        <nav aria-label="Invitation sections" className="hidden wedding-lg:block">
           <ul className="flex items-center gap-6">
             {links.map(([label, href]) => (
               <li key={href}>
@@ -29,7 +29,7 @@ export function SiteHeader() {
             ))}
           </ul>
         </nav>
-        <details className="group relative wedding-layout:hidden">
+        <details className="group relative wedding-lg:hidden">
           <summary className="cursor-pointer list-none font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label text-wedding-white">
             Menu <span aria-hidden="true">☰</span>
           </summary>
diff --git a/components/invite/story-section.tsx b/components/invite/story-section.tsx
index 55c7169..a9f3c83 100644
--- a/components/invite/story-section.tsx
+++ b/components/invite/story-section.tsx
@@ -24,10 +24,10 @@ export function StorySection({ content }: { content: InvitePageContent["story"]
       </FeatureSplit>
       <WeddingContainer className="py-wedding-section">
         <p className="wedding-section-label">Our journey</p>
-        <div className="mt-12 grid gap-10 wedding-layout:grid-cols-3">
+        <div className="mt-12 grid gap-10 wedding-lg:grid-cols-3">
           {content.timeline.map((item, index) => (
-            <article className="border-l border-wedding-line pl-6 wedding-layout:border-l-0 wedding-layout:pl-0" key={item.year}>
-              <div className="mb-5 flex items-center gap-4 wedding-layout:flex-col wedding-layout:items-start">
+            <article className="border-l border-wedding-line pl-6 wedding-lg:border-l-0 wedding-lg:pl-0" key={item.year}>
+              <div className="mb-5 flex items-center gap-4 wedding-lg:flex-col wedding-lg:items-start">
                 <span className="size-3 rounded-full bg-wedding-terracotta" />
                 <p className="wedding-section-label">{item.year}</p>
               </div>
diff --git a/components/invite/wedding-container.tsx b/components/invite/wedding-container.tsx
index 6f300eb..b831237 100644
--- a/components/invite/wedding-container.tsx
+++ b/components/invite/wedding-container.tsx
@@ -14,7 +14,7 @@ export function WeddingContainer({
   return (
     <div
       className={cn(
-        "mx-auto w-full px-wedding-gutter-mobile wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop",
+        "mx-auto w-full px-wedding-gutter-mobile wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop",
         wide ? "max-w-wedding-content" : "max-w-6xl",
         className,
       )}