diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index a2851a4e..6c8380ea 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next"
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
 import { ClosingCta } from "@/components/layout/closing-cta"
-import { CONTAINER, SECTION_TITLE } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN, SECTION_TITLE } from "@/components/layout/page"
 import { AssociationBodies } from "@/components/structure/association-bodies"
 import { BoardGallery } from "@/components/structure/board-gallery"
 import { LegalStatus } from "@/components/structure/legal-status"
@@ -22,8 +22,8 @@ const titleClass = `${SECTION_TITLE} text-center`
 
 export default function StructurePage() {
   return (
-    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36">
-      <section className={`${CONTAINER} pt-52 md:pt-57.5`}>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero title="Struttura" description="Un’organizzazione pensata per durare" />
       </section>
       <OrganizationChart />
diff --git a/src/app/chi-siamo/page.tsx b/src/app/chi-siamo/page.tsx
index d96a6022..88a51feb 100644
--- a/src/app/chi-siamo/page.tsx
+++ b/src/app/chi-siamo/page.tsx
@@ -6,6 +6,7 @@ import { PathSection } from "@/components/chi-siamo/path-section"
 import { ProblemSection } from "@/components/chi-siamo/problem-section"
 import { SupportSection } from "@/components/chi-siamo/support-section"
 import { VisionSection } from "@/components/chi-siamo/vision-section"
+import { PAGE_MAIN } from "@/components/layout/page"
 
 export const metadata: Metadata = {
   title: "Su di noi",
@@ -14,7 +15,7 @@ export const metadata: Metadata = {
 
 export default function ChiSiamoPage() {
   return (
-    <main className="flex w-full flex-col gap-24 pt-44 pb-24 sm:pt-56 md:gap-36 md:pb-36">
+    <main className={PAGE_MAIN}>
       <VisionSection />
       <ProblemSection />
       <AnswerSection />
diff --git a/src/app/collabora/page.tsx b/src/app/collabora/page.tsx
index a2889aaf..16fe2bc0 100644
--- a/src/app/collabora/page.tsx
+++ b/src/app/collabora/page.tsx
@@ -4,9 +4,8 @@ import { AssociationSection } from "@/components/collabora/association-section"
 import { CollaborationSection } from "@/components/collabora/collaboration-section"
 import { CompanySection } from "@/components/collabora/company-section"
 import { ContactSection } from "@/components/collabora/contact-section"
-import { sectionContainerClass } from "@/components/collabora/section"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
-import { cn } from "@/lib/utils"
 
 export const metadata: Metadata = {
   title: "Collabora con Noi",
@@ -16,9 +15,8 @@ export const metadata: Metadata = {
 
 export default function CollaboraPage() {
   return (
-    <main className="flex w-full flex-col">
-      {/* Title at y=262 (mobile) / 286 (desktop) as in Figma; Hero adds 16px / 56px above it */}
-      <section className={cn(sectionContainerClass, "pt-61.5 pb-29 sm:pt-57.5 md:pb-64.5")}>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero
           title="Collabora con Noi"
           description="Mettiamo la nostra infrastruttura e i nostri talenti a disposizione di chi ha buone idee per gli studenti del PoliMi"
diff --git a/src/app/join/page.tsx b/src/app/join/page.tsx
index 04c84c41..dd56b8da 100644
--- a/src/app/join/page.tsx
+++ b/src/app/join/page.tsx
@@ -3,7 +3,7 @@ import { AdminSection } from "@/components/join/admin"
 import { Introduction } from "@/components/join/introduction"
 import { MembershipSection } from "@/components/join/membership"
 import { TeamsSection } from "@/components/join/teams"
-import { CONTAINER } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
 
 export const metadata: Metadata = {
@@ -14,8 +14,8 @@ export const metadata: Metadata = {
 
 export default function JoinPage() {
   return (
-    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36 xl:gap-56 2xl:gap-72">
-      <section className={`${CONTAINER} pt-52 md:pt-57.5`}>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero
           title="Unisciti a Noi"
           description="Nessuna simulazione, solo progetti reali. Scopri come fare la differenza per migliaia di studenti del PoliMi"
diff --git a/src/app/storia/page.tsx b/src/app/storia/page.tsx
index 9a972cd1..4d6edfc0 100644
--- a/src/app/storia/page.tsx
+++ b/src/app/storia/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next"
 import { FiMessageCircle } from "react-icons/fi"
 import { GradientIcon } from "@/components/gradient-icon"
-import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
+import { CONTAINER, PAGE_MAIN, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import TextOnlyLayout from "@/components/layout/TextOnlySection"
 import { Boards } from "@/components/storia/boards"
 import { Continuation } from "@/components/storia/continuation"
@@ -20,80 +20,76 @@ export const metadata: Metadata = {
 
 export default function HistoryPage() {
   return (
-    <main className="mx-auto flex min-h-screen w-full flex-col gap-24 pt-44 pb-32 sm:pt-56 md:gap-32 md:pb-48">
+    <main className={PAGE_MAIN}>
       <HistoryHero />
 
-      <div className="flex w-full flex-col gap-24 md:gap-40">
-        {/* Figma reserves the right column for an archive photo that doesn't exist yet: until then the text stands alone.
-            The two milestone cards that filled it repeated the timeline right below. */}
-        <TextOnlyLayout
-          title="Come è nato tutto"
-          description={
-            <>
-              <h3 className={SECTION_TITLE}>Una domanda semplice, una grande idea.</h3>
-              <p className={cn(SECTION_LEAD, "mt-3")}>
-                Tutto è cominciato nel 2016, quando un futuro studente cercava uno spazio per entrare in contatto con i
-                propri compagni e trovare risposte alle prime domande sulla vita universitaria.
-              </p>
-              <p className={cn(SECTION_LEAD, "mt-5")}>
-                Da questa esigenza è nato un progetto collettivo, che nel tempo si è trasformato in una{" "}
-                <strong>rete capillare costruita dagli studenti, per gli studenti.</strong>
-              </p>
-            </>
-          }
-          classNames={{
-            section: `${CONTAINER} items-start [&>div>h2]:typo-title-large`,
-            textDiv: "max-w-180 items-start",
-            title: "text-balance text-start text-blue-secondary",
-            descriptionDiv: "text-start",
-            contentDiv: "hidden",
-          }}
-        />
-        <Timeline />
-        <Chapters />
-        <Boards />
-        <HistoryProjects />
-        <Thanks />
+      <TextOnlyLayout
+        title="Come è nato tutto"
+        description={
+          <>
+            <h3 className={SECTION_TITLE}>Una domanda semplice, una grande idea.</h3>
+            <p className={cn(SECTION_LEAD, "mt-3")}>
+              Tutto è cominciato nel 2016, quando un futuro studente cercava uno spazio per entrare in contatto con i
+              propri compagni e trovare risposte alle prime domande sulla vita universitaria.
+            </p>
+            <p className={cn(SECTION_LEAD, "mt-5")}>
+              Da questa esigenza è nato un progetto collettivo, che nel tempo si è trasformato in una{" "}
+              <strong>rete capillare costruita dagli studenti, per gli studenti.</strong>
+            </p>
+          </>
+        }
+        classNames={{
+          section: `${CONTAINER} items-start [&>div>h2]:typo-title-large`,
+          textDiv: "max-w-180 items-start",
+          title: "text-balance text-start text-blue-secondary",
+          descriptionDiv: "text-start",
+          contentDiv: "hidden",
+        }}
+      />
+      <Timeline />
+      <Chapters />
+      <Boards />
+      <HistoryProjects />
+      <Thanks />
 
-        <TextOnlyLayout
-          title="Quello che abbiamo fatto di più"
-          description={
-            <>
-              <h3 className={SECTION_TITLE}>Essere lì quando serve.</h3>
-              <p className={cn(SECTION_LEAD, "mt-3")}>
-                Al di là dei progetti e dei team, PoliNetwork fa una cosa davvero importante: risponde alle domande
-                degli studenti.
-              </p>
-              <p className={SECTION_LEAD}>
-                Intorno ai gruppi dei corsi sono nati spazi per tutto ciò che riguarda la vita universitaria: dagli
-                esami ai piani di studio, dalla ricerca casa alla compravendita dei libri, fino al tempo libero.
-              </p>
-            </>
-          }
-          classNames={{
-            section: `${CONTAINER} gap-12 xl:flex-row xl:items-center xl:gap-16 [&>div>h2]:typo-title-large`,
-            title: "text-balance text-start text-blue-secondary",
-            textDiv: "min-w-0 items-start xl:w-1/2",
-            descriptionDiv: "text-start",
-            contentDiv: "min-w-0 xl:w-1/2",
-          }}
-        >
-          <div className="flex flex-col gap-4 border-blue-primary/30 border-l pl-6 sm:pl-10">
-            <GradientIcon icon={FiMessageCircle} className="size-10 sm:size-14" />
-            <p className="typo-headline-small sm:typo-headline-medium text-balance text-blue-secondary">
-              L’obiettivo è raggiunto.
+      <TextOnlyLayout
+        title="Quello che abbiamo fatto di più"
+        description={
+          <>
+            <h3 className={SECTION_TITLE}>Essere lì quando serve.</h3>
+            <p className={cn(SECTION_LEAD, "mt-3")}>
+              Al di là dei progetti e dei team, PoliNetwork fa una cosa davvero importante: risponde alle domande degli
+              studenti.
             </p>
             <p className={SECTION_LEAD}>
-              Se anche un solo studente ha trovato casa grazie a un nostro gruppo, o si è laureato in tempo perché
-              qualcuno gli ha risposto.
+              Intorno ai gruppi dei corsi sono nati spazi per tutto ciò che riguarda la vita universitaria: dagli esami
+              ai piani di studio, dalla ricerca casa alla compravendita dei libri, fino al tempo libero.
             </p>
-          </div>
-        </TextOnlyLayout>
+          </>
+        }
+        classNames={{
+          section: `${CONTAINER} gap-12 xl:flex-row xl:items-center xl:gap-16 [&>div>h2]:typo-title-large`,
+          title: "text-balance text-start text-blue-secondary",
+          textDiv: "min-w-0 items-start xl:w-1/2",
+          descriptionDiv: "text-start",
+          contentDiv: "min-w-0 xl:w-1/2",
+        }}
+      >
+        <div className="flex flex-col gap-4 border-blue-primary/30 border-l pl-6 sm:pl-10">
+          <GradientIcon icon={FiMessageCircle} className="size-10 sm:size-14" />
+          <p className="typo-headline-small sm:typo-headline-medium text-balance text-blue-secondary">
+            L’obiettivo è raggiunto.
+          </p>
+          <p className={SECTION_LEAD}>
+            Se anche un solo studente ha trovato casa grazie a un nostro gruppo, o si è laureato in tempo perché
+            qualcuno gli ha risposto.
+          </p>
+        </div>
+      </TextOnlyLayout>
 
-        <Organization />
+      <Organization />
 
-        <Continuation />
-      </div>
+      <Continuation />
     </main>
   )
 }
diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx
index 5489f290..4f0dcd34 100644
--- a/src/app/team/page.tsx
+++ b/src/app/team/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next"
 import { FiUsers } from "react-icons/fi"
 import { ClosingCta } from "@/components/layout/closing-cta"
-import { CONTAINER } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { applicationHref, teams } from "@/components/team/constants"
 import { TeamSection } from "@/components/team/team-section"
 import { Button } from "@/components/ui/button"
@@ -14,8 +14,8 @@ export const metadata: Metadata = {
 
 export default function TeamPage() {
   return (
-    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36 xl:gap-48">
-      <section className={`${CONTAINER} pt-52 md:pt-57.5`}>
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
         <Hero
           title="I Team"
           description="PoliNetwork si muove grazie a quattro anime operative distinte, guidate dai rispettivi Capi Dipartimento."
diff --git a/src/components/chi-siamo/vision-section.tsx b/src/components/chi-siamo/vision-section.tsx
index b95392ff..51fb6be4 100644
--- a/src/components/chi-siamo/vision-section.tsx
+++ b/src/components/chi-siamo/vision-section.tsx
@@ -1,9 +1,9 @@
-import { CONTAINER, SECTION_LEAD } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO, SECTION_LEAD } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
 
 export function VisionSection() {
   return (
-    <section className={`${CONTAINER} flex flex-col items-center gap-6 text-center`}>
+    <section className={`${CONTAINER} ${PAGE_HERO} flex flex-col items-center gap-6 text-center`}>
       <p className="typo-title-large text-blue-secondary">La nostra visione</p>
       <h1 className="typo-display-small sm:typo-display-medium lg:typo-display-large max-w-260 text-balance bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
         Un Politecnico in cui nessuno studente resti indietro per mancanza di{" "}
diff --git a/src/components/collabora/about-section.tsx b/src/components/collabora/about-section.tsx
index 5ac09718..48202e60 100644
--- a/src/components/collabora/about-section.tsx
+++ b/src/components/collabora/about-section.tsx
@@ -4,11 +4,12 @@ import chatIcon from "@/assets/icons/collabora/chat.svg"
 import groupIcon from "@/assets/icons/collabora/group.svg"
 import handshakeIcon from "@/assets/icons/collabora/handshake.svg"
 import schoolIcon from "@/assets/icons/collabora/school.svg"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
 import { cn } from "@/lib/utils"
 import { InfoCard, type InfoCardData } from "./info-card"
-import { Aside, Highlight, SectionTitle, sectionContainerClass, sectionTextClass } from "./section"
+import { Aside, Highlight } from "./section"
 
 const cards: InfoCardData[] = [
   {
@@ -39,9 +40,7 @@ const cards: InfoCardData[] = [
     title: "1000+",
     description: (
       <>
-        <Highlight>Persone</Highlight> nel nostro evento
-        <br />
-        più grande
+        <Highlight>Persone</Highlight> nel nostro evento più grande
       </>
     ),
     mobileDescription: "Persone al nostro evento più grande",
@@ -65,12 +64,13 @@ const cards: InfoCardData[] = [
 
 export function AboutSection() {
   return (
-    <section className={cn(sectionContainerClass, "pt-30 pb-30 md:pt-18.75 md:pb-31.25")}>
-      <div className="flex 3xl:flex-row flex-col items-center 3xl:justify-between 3xl:gap-10 gap-8.75 md:items-start md:gap-12">
-        <div className="flex w-full flex-col items-center gap-6 md:max-w-179.75 md:items-start md:gap-2.5">
+    <section className={CONTAINER}>
+      {/* Copy and figures side by side from xl, as in Figma; below, the figures run as one row (two on tablets) */}
+      <div className="flex flex-col gap-8.75 md:gap-12 xl:flex-row xl:items-start xl:justify-between">
+        <div className="flex w-full flex-col items-start gap-6 md:max-w-179.75 md:gap-2.5">
           <div className="flex w-full flex-col gap-6 md:gap-3">
-            <SectionTitle>Chi siamo?</SectionTitle>
-            <div className={cn(sectionTextClass, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>
+            <h2 className={SECTION_TITLE}>Chi siamo?</h2>
+            <div className={cn(SECTION_LEAD, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>
               <p>PoliNetwork è l'infrastruttura di comunicazione studentesca del Politecnico di Milano.</p>
               <p>
                 Gestiamo oltre 500 gruppi Telegram e WhatsApp, una presenza social in crescita e strumenti digitali
@@ -92,14 +92,14 @@ export function AboutSection() {
           </div>
         </div>
 
-        <div className="grid shrink-0 grid-cols-[repeat(2,17.5rem)] gap-x-13.75 gap-y-8.75 max-md:hidden">
+        <div className="grid shrink-0 3xl:grid-cols-[repeat(2,17.5rem)] grid-cols-2 gap-6 3xl:gap-x-13.75 3xl:gap-y-8.75 max-md:hidden lg:grid-cols-4 xl:grid-cols-[repeat(2,15rem)]">
           {cards.map((card) => (
-            <InfoCard key={card.title} card={card} descriptionColorClassName="text-black" className="min-h-61.25" />
+            <InfoCard key={card.title} card={card} className="h-full lg:max-3xl:p-6" />
           ))}
         </div>
 
         {/* Bleeds to the screen edges like the Figma carousel, so the next card peeks in */}
-        <Carousel opts={{ containScroll: false }} className="w-screen max-w-none md:hidden">
+        <Carousel opts={{ containScroll: false }} className="w-screen max-w-none self-center md:hidden">
           <CarouselContent className="-ml-2">
             {cards.map((card) => (
               <CarouselItem key={card.title} className="basis-auto pl-2">
diff --git a/src/components/collabora/association-section.tsx b/src/components/collabora/association-section.tsx
index 1e2fd866..cc04e76e 100644
--- a/src/components/collabora/association-section.tsx
+++ b/src/components/collabora/association-section.tsx
@@ -39,7 +39,6 @@ export function AssociationSection() {
           }}
         />
       }
-      className="py-30 md:py-37.5"
     >
       <p>
         Se fai parte dell'ecosistema universitario del Politecnico di Milano o di un'altra università, possiamo valutare
@@ -48,11 +47,8 @@ export function AssociationSection() {
       </p>
       <p>
         Le collaborazioni più efficaci che abbiamo avuto nel tempo sono nate da gruppi studenteschi che condividevano
-        <br className="hidden min-[1728px]:inline" /> una parte degli obiettivi che perseguiamo:{" "}
-        <Highlight>
-          rendere la vita universitaria meno complicata e più ricca per chi studia
-          <br className="hidden min-[1728px]:inline" /> al Politecnico.
-        </Highlight>
+        una parte degli obiettivi che perseguiamo:{" "}
+        <Highlight>rendere la vita universitaria meno complicata e più ricca per chi studia al Politecnico.</Highlight>
       </p>
     </PhotoSection>
   )
diff --git a/src/components/collabora/collaboration-section.tsx b/src/components/collabora/collaboration-section.tsx
index e615b72f..81832916 100644
--- a/src/components/collabora/collaboration-section.tsx
+++ b/src/components/collabora/collaboration-section.tsx
@@ -1,13 +1,15 @@
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
-import { Aside, Highlight, SectionTitle, sectionContainerClass, sectionTextClass } from "./section"
+import { Aside, Highlight } from "./section"
 
 export function CollaborationSection() {
   return (
-    <section className={cn(sectionContainerClass, "py-30 md:py-25")}>
+    <section className={CONTAINER}>
       <div className="flex flex-col gap-6 md:gap-3">
-        <SectionTitle>Cosa possiamo fare insieme?</SectionTitle>
-        <div className={cn(sectionTextClass, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>
-          <p className="md:max-w-239.75">
+        <h2 className={SECTION_TITLE}>Cosa possiamo fare insieme?</h2>
+        <div className={cn(SECTION_LEAD, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>
+          {/* Figma runs this paragraph 959px wide at 24px; at 20px that is ~90 characters a line, so it narrows below 3xl */}
+          <p className="3xl:max-w-239.75 md:max-w-180">
             Collaborare con noi significa <Highlight>accedere a questa community in modo diretto</Highlight>. Non siamo
             un canale pubblicitario e non accettiamo promozioni commerciali generiche: ogni collaborazione viene
             valutata in termini di <Highlight>valore concreto per gli studenti del Politecnico</Highlight>{" "}
diff --git a/src/components/collabora/company-section.tsx b/src/components/collabora/company-section.tsx
index d04247be..f4bf6bcc 100644
--- a/src/components/collabora/company-section.tsx
+++ b/src/components/collabora/company-section.tsx
@@ -33,7 +33,6 @@ export function CompanySection() {
         />
       }
       photoFirst
-      className="py-30 md:py-31.25"
     >
       <p>
         PoliNetwork è un punto di accesso diretto alla community studentesca del Politecnico di Milano: migliaia di
diff --git a/src/components/collabora/contact-section.tsx b/src/components/collabora/contact-section.tsx
index cdd23e4e..4e43c90d 100644
--- a/src/components/collabora/contact-section.tsx
+++ b/src/components/collabora/contact-section.tsx
@@ -2,9 +2,9 @@ import { Fragment } from "react"
 import favoriteIcon from "@/assets/icons/collabora/favorite.svg"
 import mailIcon from "@/assets/icons/collabora/mail.svg"
 import promptSuggestionIcon from "@/assets/icons/collabora/prompt-suggestion.svg"
+import { CONTAINER, SECTION_TITLE } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
 import { InfoCard, type InfoCardData } from "./info-card"
-import { SectionTitle, sectionContainerClass } from "./section"
 
 const cards: InfoCardData[] = [
   {
@@ -14,6 +14,8 @@ const cards: InfoCardData[] = [
     icon: mailIcon,
     iconClassName: "mr-2.5 h-5.5 w-7 md:mr-0 md:h-12 md:w-15",
     descriptionClassName: "max-w-56",
+    // The only step that is an action: it opens the mail client
+    href: "mailto:events@polinetwork.org",
   },
   {
     title: "Condividi la tua visione",
@@ -46,18 +48,24 @@ const connectorClassNames = [
 
 export function ContactSection() {
   return (
-    <section className={cn(sectionContainerClass, "pt-15 pb-33.25 md:pt-31.25 md:pb-54.5")}>
-      <SectionTitle className="mb-7.5 md:mb-9.25">Come contattarci</SectionTitle>
+    <section className={CONTAINER}>
+      <h2 className={cn(SECTION_TITLE, "mb-7.5 md:mb-9.25")}>Come contattarci</h2>
 
-      <div className="flex flex-col items-center md:max-[1615px]:items-start min-[1616px]:flex-row">
+      {/* A row of equal steps from lg (tighter padding until 3xl); stacked below, at Figma's card width */}
+      <div className="flex flex-col items-center md:items-start lg:flex-row lg:items-stretch">
         {cards.map((card, index) => (
           <Fragment key={card.title}>
-            <InfoCard card={card} className="w-full md:min-h-61.25 md:w-104.25 md:shrink-0" />
+            <InfoCard
+              card={card}
+              // In a row the three titles share the width, so they shrink and may wrap
+              titleClassName="md:typo-headline-small lg:whitespace-normal"
+              className="w-full md:w-104.25 md:shrink-0 lg:w-auto lg:min-w-0 lg:flex-1 lg:max-3xl:p-6"
+            />
             {index < connectorClassNames.length && (
               <div
                 aria-hidden
                 className={cn(
-                  "h-10 w-1 shrink-0 bg-linear-to-b md:max-[1615px]:ml-51.5 min-[1616px]:h-1 min-[1616px]:w-auto min-[1616px]:min-w-10 min-[1616px]:flex-1 min-[1616px]:bg-linear-to-r",
+                  "h-10 w-1 shrink-0 bg-linear-to-b md:max-lg:ml-51.5 lg:h-1 lg:w-10 lg:self-center lg:bg-linear-to-r",
                   connectorClassNames[index]
                 )}
               />
diff --git a/src/components/collabora/info-card.tsx b/src/components/collabora/info-card.tsx
index e84892a6..b9c4bb7c 100644
--- a/src/components/collabora/info-card.tsx
+++ b/src/components/collabora/info-card.tsx
@@ -27,10 +27,13 @@ export type InfoCardData = {
 export function InfoCard({
   card,
   className,
+  titleClassName,
   descriptionColorClassName = "text-text-primary",
 }: {
   card: InfoCardData
   className?: string
+  /** Title size and wrapping, for rows where the default single-line title doesn't fit. */
+  titleClassName?: string
   descriptionColorClassName?: string
 }) {
   const { title, description, mobileDescription, icon, iconClassName, descriptionClassName, href } = card
@@ -53,7 +56,12 @@ export function InfoCard({
           <Image src={icon} alt="" className={iconClassName} />
         </div>
         {/* On the narrowest phones an email title may not fit: let it wrap after the "@" */}
-        <h3 className="typo-title-large md:typo-headline-medium min-w-0 bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent md:whitespace-nowrap">
+        <h3
+          className={cn(
+            "typo-title-large md:typo-headline-medium min-w-0 bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent md:whitespace-nowrap",
+            titleClassName
+          )}
+        >
           {title.replace("@", "@\u200B")}
         </h3>
       </div>
diff --git a/src/components/collabora/photo-section.tsx b/src/components/collabora/photo-section.tsx
index 52c51847..03528219 100644
--- a/src/components/collabora/photo-section.tsx
+++ b/src/components/collabora/photo-section.tsx
@@ -1,7 +1,7 @@
 import Image, { type StaticImageData } from "next/image"
 import type { ReactNode } from "react"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { cn } from "@/lib/utils"
-import { SectionTitle, sectionContainerClass, sectionTextClass } from "./section"
 
 type PhotoSectionProps = {
   title: ReactNode
@@ -15,12 +15,12 @@ type PhotoSectionProps = {
   decorations: ReactNode
   /** Photo on the left on desktop. */
   photoFirst?: boolean
-  className?: string
 }
 
 /**
- * Heading + copy next to a photo. Stacked (copy, then photo) up to `xl`; from `xl` the two columns keep the
- * 719:611 ratio of the 1728px Figma frame, bottom-aligned.
+ * Heading + copy next to a photo. Stacked (copy, then a photo as wide as the copy) on phones and portrait tablets;
+ * from `lg` the two columns keep the 719:611 ratio of the 1728px Figma frame, centred on each other so a taller
+ * text column doesn't leave the photo hanging at one edge.
  */
 export function PhotoSection({
   title,
@@ -30,27 +30,26 @@ export function PhotoSection({
   frameClassName,
   decorations,
   photoFirst = false,
-  className,
 }: PhotoSectionProps) {
   return (
-    <section className={cn(sectionContainerClass, className)}>
+    <section className={CONTAINER}>
       <div
         className={cn(
-          "flex flex-col items-center gap-6 md:items-start md:gap-12 xl:grid xl:items-end xl:gap-x-27",
-          photoFirst ? "xl:grid-cols-[611fr_719fr]" : "xl:grid-cols-[719fr_611fr]"
+          "flex flex-col items-start gap-8 md:gap-12 lg:grid lg:items-center lg:gap-x-12 xl:gap-x-27",
+          photoFirst ? "lg:grid-cols-[611fr_719fr]" : "lg:grid-cols-[719fr_611fr]"
         )}
       >
-        <div className={cn("flex w-full flex-col gap-6 md:max-w-179.75 md:gap-3", photoFirst && "xl:order-last")}>
-          <SectionTitle>{title}</SectionTitle>
-          <div className={cn(sectionTextClass, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>{children}</div>
+        <div className={cn("flex w-full flex-col gap-6 md:max-w-179.75 md:gap-3", photoFirst && "lg:order-last")}>
+          <h2 className={SECTION_TITLE}>{title}</h2>
+          <div className={cn(SECTION_LEAD, "flex flex-col gap-5 pb-2 md:gap-3 md:pb-0")}>{children}</div>
         </div>
 
-        <div className={cn("relative w-full md:max-w-152.75 xl:max-w-none", frameClassName)}>
+        <div className={cn("relative w-full md:max-w-179.75 lg:max-w-none", frameClassName)}>
           <div className="absolute inset-0 overflow-hidden rounded-rectangles">
             <Image
               src={image}
               alt=""
-              sizes="(min-width: 768px) 611px, 100vw"
+              sizes="(min-width: 1024px) 611px, (min-width: 768px) 720px, 100vw"
               className={cn("absolute max-w-none", imageClassName)}
             />
           </div>
diff --git a/src/components/collabora/section.tsx b/src/components/collabora/section.tsx
index 03da89db..6c085ee6 100644
--- a/src/components/collabora/section.tsx
+++ b/src/components/collabora/section.tsx
@@ -1,32 +1,6 @@
 import type { ReactNode } from "react"
 import { cn } from "@/lib/utils"
 
-/**
- * Horizontal frame shared by every Collabora section: 24px gutters on mobile (402px Figma frame), growing to the
- * 145px gutters of the 1728px desktop frame, then centered so the content column never exceeds 1438px.
- */
-export const sectionContainerClass = "mx-auto w-full max-w-432 px-6 md:px-[clamp(1.5rem,8.391%,9.0625rem)]"
-
-export function SectionTitle({ children, className }: { children: ReactNode; className?: string }) {
-  return (
-    <h2
-      className={cn(
-        "typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-accent-lightbg to-[#41496b] bg-clip-text text-center text-transparent md:mb-3 md:text-start",
-        className
-      )}
-    >
-      {children}
-    </h2>
-  )
-}
-
-/**
- * Section body copy: Red Hat 16px centered on mobile, Poppins 24px on desktop. Browsers add the letter-spacing after
- * the last glyph of a line too, so lines that exactly fill their Figma box would wrap: the box gets 1px of slack.
- */
-export const sectionTextClass =
-  "typo-body-large md:typo-headline-small -mx-[0.5px] text-center text-black md:mr-[-1px] md:ml-0 md:text-start"
-
 export function Highlight({ children }: { children: ReactNode }) {
   return <span className="text-blue-secondary">{children}</span>
 }
diff --git a/src/components/join/admin.tsx b/src/components/join/admin.tsx
index 7eff89fa..12eb0332 100644
--- a/src/components/join/admin.tsx
+++ b/src/components/join/admin.tsx
@@ -41,7 +41,8 @@ export function AdminSection() {
             <li key={card.title} className="relative min-w-0">
               <InfoCard
                 card={card}
-                className="[&_h3]:typo-title-large h-full md:p-8 [&_h3]:whitespace-normal [&_h3]:text-balance"
+                className="h-full md:p-8"
+                titleClassName="md:typo-title-large md:whitespace-normal text-balance"
               />
               {index < connectors.length && (
                 <Image
diff --git a/src/components/join/cards.tsx b/src/components/join/cards.tsx
index 3e89da3c..d4ea6d0a 100644
--- a/src/components/join/cards.tsx
+++ b/src/components/join/cards.tsx
@@ -1,14 +1,15 @@
 import { InfoCard, type InfoCardData } from "@/components/collabora/info-card"
 import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
 
-const cardClassName = "h-full md:p-6 [&_h3]:typo-title-large [&_h3]:whitespace-normal [&_h3]:text-balance"
+const cardClassName = "h-full md:p-6"
+const titleClassName = "md:typo-title-large md:whitespace-normal text-balance"
 
 export function JoinCards({ cards, carousel = false }: { cards: InfoCardData[]; carousel?: boolean }) {
   if (!carousel) {
     return (
       <div className="grid min-w-0 gap-6 md:grid-cols-2">
         {cards.map((card) => (
-          <InfoCard key={card.title} card={card} className={cardClassName} />
+          <InfoCard key={card.title} card={card} className={cardClassName} titleClassName={titleClassName} />
         ))}
       </div>
     )
@@ -23,7 +24,7 @@ export function JoinCards({ cards, carousel = false }: { cards: InfoCardData[];
       <CarouselContent className="mr-6 ml-2 sm:mr-10 sm:ml-6 md:mx-0 md:grid md:grid-cols-2 md:gap-6">
         {cards.map((card) => (
           <CarouselItem key={card.title} className="basis-[90%] sm:basis-1/2 md:pl-0">
-            <InfoCard card={card} className={cardClassName} />
+            <InfoCard card={card} className={cardClassName} titleClassName={titleClassName} />
           </CarouselItem>
         ))}
       </CarouselContent>
diff --git a/src/components/layout/page.ts b/src/components/layout/page.ts
index a725375a..ca8cc332 100644
--- a/src/components/layout/page.ts
+++ b/src/components/layout/page.ts
@@ -10,3 +10,17 @@ export const SECTION_LEAD = "typo-body-large sm:typo-headline-extrasmall text-pr
 /** A link inside running text: always underlined, so it reads as a link without relying on colour. */
 export const INLINE_LINK =
   "rounded-sm text-blue-secondary underline decoration-1 decoration-blue-secondary/40 underline-offset-4 outline-none transition-colors hover:decoration-blue-secondary focus-visible:ring-2 focus-visible:ring-blue-secondary"
+
+/**
+ * Vertical rhythm of the redesigned pages. Figma leaves 180px between section blocks at 1728px (Su di noi, Storia):
+ * 96px on phones, 128px on tablets, 180px from xl. The bottom padding repeats the gap before the footer.
+ */
+export const PAGE_MAIN = "flex w-full flex-col gap-24 pb-24 md:gap-32 md:pb-32 xl:gap-45 xl:pb-45"
+
+/**
+ * The page's opening section. The top padding clears the fixed header: with `Hero`'s own offset the title sits at
+ * y=286 on desktop, as in every Figma frame. Figma also leaves more air after the hero (~270px at 1728) than between
+ * sections (180px): the bottom padding adds that difference to the main gap.
+ */
+export const PAGE_HERO_TOP = "pt-52 md:pt-57.5"
+export const PAGE_HERO = `${PAGE_HERO_TOP} pb-8 md:pb-12 xl:pb-24`
diff --git a/src/components/storia/hero.tsx b/src/components/storia/hero.tsx
index b13235ee..071ac805 100644
--- a/src/components/storia/hero.tsx
+++ b/src/components/storia/hero.tsx
@@ -1,18 +1,17 @@
 import Link from "next/link"
 import { FiArrowDown } from "react-icons/fi"
-import { CONTAINER } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 import { Hero } from "@/components/ui/hero"
 
-// Figma: a centred XL title and nothing else. The board portraits appear further down, under "I nostri direttivi".
 export function HistoryHero() {
   return (
-    <section className={`${CONTAINER} flex flex-col items-center gap-10`}>
+    <section className={`${CONTAINER} ${PAGE_HERO} flex flex-col items-center gap-10`}>
       <Hero
         title="La nostra storia"
         description="Da un gruppo Telegram a una rete costruita dagli studenti, per gli studenti."
         gradientDescription
-        className="[&_h2]:typo-display-fluid-extralarge [&_h2]:py-0 [&_p]:max-w-145 [&_p]:text-balance"
+        className="[&_h2]:typo-display-fluid-extralarge [&_p]:max-w-145 [&_p]:text-balance"
       />
       <div className="flex flex-wrap justify-center gap-3">
         <Button asChild size="lg">