diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 6c8380ea..34afdc94 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, PAGE_HERO, PAGE_MAIN, SECTION_TITLE } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN, SECTION_STACK, 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"
@@ -17,7 +17,6 @@ export const metadata: Metadata = {
     "Un’organizzazione pensata per durare: scopri l’organigramma, il Direttivo, gli organi associativi e i ruoli di PoliNetwork APS.",
 }
 
-const containerClass = `${CONTAINER} flex flex-col gap-10 md:gap-14`
 const titleClass = `${SECTION_TITLE} text-center`
 
 export default function StructurePage() {
@@ -27,7 +26,7 @@ export default function StructurePage() {
         <Hero title="Struttura" description="Un’organizzazione pensata per durare" />
       </section>
       <OrganizationChart />
-      <section aria-labelledby="direttivo-title" className={containerClass}>
+      <section aria-labelledby="direttivo-title" className={SECTION_STACK}>
         <h2 id="direttivo-title" className={titleClass}>
           Il Direttivo in carica
         </h2>
@@ -38,13 +37,13 @@ export default function StructurePage() {
           </p>
         </div>
       </section>
-      <section aria-labelledby="associazione-title" className={containerClass}>
+      <section aria-labelledby="associazione-title" className={SECTION_STACK}>
         <h2 id="associazione-title" className={titleClass}>
           Come funziona l’associazione
         </h2>
         <AssociationBodies />
       </section>
-      <section aria-labelledby="partecipa-title" className={containerClass}>
+      <section aria-labelledby="partecipa-title" className={SECTION_STACK}>
         <h2 id="partecipa-title" className={titleClass}>
           Trova il tuo posto in PoliNetwork
         </h2>
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 256adc98..c1a8d014 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import { CollaboraSection } from "@/components/contact/collabora-section"
 import { EmailSection } from "@/components/contact/email-section"
 import { GroupsSection } from "@/components/contact/groups-section"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
 
 export const metadata: Metadata = {
@@ -11,12 +12,14 @@ export const metadata: Metadata = {
 
 export default function Contact() {
   return (
-    <main className="mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-60 px-4 py-49 md:gap-75">
-      <Hero
-        title="Contattaci"
-        description="Qualunque sia la tua domanda, PoliNetwork è a disposizione."
-        gradientDescription
-      />
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
+        <Hero
+          title="Contattaci"
+          description="Qualunque sia la tua domanda, PoliNetwork è a disposizione."
+          gradientDescription
+        />
+      </section>
       <GroupsSection />
       <CollaboraSection />
       <EmailSection />
diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
index 8d1c623e..a721908d 100644
--- a/src/app/projects/[id]/page.tsx
+++ b/src/app/projects/[id]/page.tsx
@@ -2,10 +2,11 @@ import type { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 import { notFound } from "next/navigation"
-import { FiArrowLeft, FiArrowUpRight, FiUploadCloud } from "react-icons/fi"
+import { FiArrowLeft, FiArrowUpRight } from "react-icons/fi"
 import { Glass } from "@/components/glass"
 import { GradientIcon } from "@/components/gradient-icon"
-import { SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
+import { ClosingCta } from "@/components/layout/closing-cta"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN, SECTION_LEAD, SECTION_STACK, SECTION_TITLE } from "@/components/layout/page"
 import { getProjectResources, resourceDetails } from "@/components/projects/resources"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardTitle } from "@/components/ui/card"
@@ -39,16 +40,21 @@ export default async function ProjectPage({ params }: Props) {
   const resources = getProjectResources(project)
 
   return (
-    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36">
-      <section className="mx-auto flex w-full max-w-330 flex-col gap-6 px-6 pt-52 md:pt-57.5">
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO} flex flex-col gap-6`}>
         <Link
           href="/projects"
-          className="typo-body-medium flex w-fit items-center gap-2 text-blue-secondary underline-offset-4 hover:underline focus-visible:underline"
+          className="typo-body-medium flex w-fit items-center gap-2 rounded-sm text-blue-secondary underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-blue-secondary"
         >
           <FiArrowLeft aria-hidden className="size-4 shrink-0" /> Tutti i progetti
         </Link>
-        <Glass className="grid items-center gap-8 rounded-rectangles border-white/50 bg-linear-to-br from-background-blur to-blue-tertiary/30 p-6 text-center sm:p-12 md:grid-cols-[auto_minmax(0,1fr)] md:gap-12 md:text-start">
-          {project.logo ? (
+        <Glass
+          className={cn(
+            "grid items-center gap-8 rounded-rectangles border-white/50 bg-background-blur p-6 text-center sm:p-12 md:gap-12 md:text-start",
+            project.logo && "md:grid-cols-[auto_minmax(0,1fr)]"
+          )}
+        >
+          {project.logo && (
             // Project logos are app icons with their own background and corners: shown as they are, not framed
             <Image
               src={project.logo}
@@ -58,10 +64,6 @@ export default async function ProjectPage({ params }: Props) {
               sizes="(min-width: 768px) 160px, 112px"
               className="mx-auto size-28 object-contain md:size-40"
             />
-          ) : (
-            <Glass className="mx-auto flex size-28 items-center justify-center rounded-rectangles border-white/50 bg-background-blur p-0 shadow-sm md:size-40">
-              <GradientIcon icon={FiUploadCloud} className="size-12 md:size-16" />
-            </Glass>
           )}
           <div className="flex min-w-0 flex-col gap-4">
             {project.category in categoryLabels && (
@@ -74,10 +76,7 @@ export default async function ProjectPage({ params }: Props) {
       </section>
 
       {resources.length > 0 && (
-        <section
-          aria-labelledby="risorse-title"
-          className="mx-auto flex w-full max-w-330 flex-col gap-10 px-6 md:gap-14"
-        >
+        <section aria-labelledby="risorse-title" className={SECTION_STACK}>
           <div className="flex flex-col gap-4 text-center md:text-start">
             <h2 id="risorse-title" className={SECTION_TITLE}>
               Come usarlo
@@ -135,19 +134,17 @@ export default async function ProjectPage({ params }: Props) {
         </section>
       )}
 
-      <section className="mx-auto w-full max-w-330 px-6">
-        <Glass className="flex flex-col items-center gap-6 rounded-rectangles border-white/50 bg-linear-to-br from-background-blur to-blue-tertiary/30 p-6 text-center sm:p-12">
-          <h2 className={SECTION_TITLE}>Scopri gli altri progetti</h2>
-          <p className={cn(SECTION_LEAD, "max-w-200 text-balance")}>
-            Strumenti e app realizzati dagli studenti del Politecnico, per gli studenti del Politecnico.
-          </p>
+      <ClosingCta
+        title="Scopri gli altri progetti"
+        lead="Strumenti e app realizzati dagli studenti del Politecnico, per gli studenti del Politecnico."
+        action={
           <Button asChild size="lg" className="w-full sm:w-fit">
             <Link href="/projects">
               Tutti i progetti <FiArrowUpRight aria-hidden />
             </Link>
           </Button>
-        </Glass>
-      </section>
+        }
+      />
     </main>
   )
 }
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index fbfb0d74..25e85bd6 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -1,7 +1,9 @@
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Collection } from "@/components/projects/collection"
 import { CommunityNews } from "@/components/projects/community-news"
 import { Deprecated } from "@/components/projects/deprecated"
 import { Upload } from "@/components/projects/upload"
+import { Hero } from "@/components/ui/hero"
 import { getAllProjects } from "@/queries/projects"
 
 export const metadata = {
@@ -11,7 +13,7 @@ export const metadata = {
 
 export const dynamic = "force-dynamic"
 
-export default async function Home() {
+export default async function ProjectsPage() {
   const projects = await getAllProjects()
 
   const news = projects.filter((project) => project.category === "news")
@@ -19,9 +21,12 @@ export default async function Home() {
   const deprecated = projects.filter((project) => project.category === "deprecated")
 
   return (
-    <main className="w-full">
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
+        <Hero title="Projects" description="Esplora e contribuisci ai progetti degli studenti" />
+      </section>
       <CommunityNews projects={news} />
-      <Collection projects={general} />
+      <Collection projects={general} searchable={projects} />
       <Upload />
       <Deprecated projects={deprecated} />
     </main>
diff --git a/src/components/card-caption.tsx b/src/components/card-caption.tsx
index 43fe8e3b..70468f5c 100644
--- a/src/components/card-caption.tsx
+++ b/src/components/card-caption.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image"
 import Link from "next/link"
 import type { ReactNode } from "react"
 import type { IconType } from "react-icons"
@@ -9,18 +10,25 @@ export function CardCaption({
   caption,
   icon,
   iconPosition = "right",
+  image,
   href,
   footer,
   className,
+  titleClassName,
+  captionClassName,
 }: {
   title: string
   caption: ReactNode
   icon?: IconType
   iconPosition?: "top" | "right"
+  /** An image shown in place of the icon, e.g. a project's logo. */
+  image?: string
   href?: string
   /** Pinned to the bottom of the card, e.g. where a link leads to. */
   footer?: ReactNode
   className?: string
+  titleClassName?: string
+  captionClassName?: string
 }) {
   return (
     // Only cards that lead somewhere react to hover
@@ -32,10 +40,19 @@ export function CardCaption({
       <CardHeader
         className={`typo-headline-medium relative flex ${iconPosition === "right" ? "justify-between" : "flex-col-reverse"}`}
       >
-        <CardTitle className="typo-headline-medium">{title}</CardTitle>
-        {icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "md" : "lg"}></CardAction>}
+        <CardTitle gradient={false} className={cn("typo-headline-medium", titleClassName)}>
+          {/* Gradient per line (box-decoration-clone): a two-line title doesn't fade into a paler second line */}
+          <span className="bg-linear-to-b from-blue-secondary to-blue-primary box-decoration-clone bg-clip-text text-transparent">
+            {title}
+          </span>
+        </CardTitle>
+        {image ? (
+          <Image src={image} alt="" width={40} height={40} className="size-10 shrink-0 object-contain" />
+        ) : (
+          icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "md" : "lg"}></CardAction>
+        )}
       </CardHeader>
-      <CardContent className="typo-body-medium relative">
+      <CardContent className={cn("typo-body-medium relative", captionClassName)}>
         {typeof caption === "string" ? <p>{caption}</p> : caption}
       </CardContent>
       {footer && <div className="relative mt-auto">{footer}</div>}
diff --git a/src/components/contact-card.tsx b/src/components/contact-card.tsx
index 742a8160..716db936 100644
--- a/src/components/contact-card.tsx
+++ b/src/components/contact-card.tsx
@@ -9,12 +9,12 @@ export type ContactCardData = {
 
 export function ContactCard({ title, description, email }: ContactCardData) {
   return (
-    <Card className="h-66 w-full max-w-78 gap-6 justify-self-center p-6">
+    <Card className="h-auto w-full gap-4 p-6">
       <CardHeader>
-        <CardTitle className="typo-headline-small">{title}</CardTitle>
+        <CardTitle className="typo-headline-small xl:typo-headline-extrasmall">{title}</CardTitle>
       </CardHeader>
       <CardContent className="typo-body-medium flex-1">{description}</CardContent>
-      <CardBottomButton variant="tertiary" asChild className="mt-auto">
+      <CardBottomButton variant="tertiary" asChild className="mt-auto max-w-full">
         <a href={`mailto:${email}`}>{email}</a>
       </CardBottomButton>
     </Card>
diff --git a/src/components/contact/collabora-section.tsx b/src/components/contact/collabora-section.tsx
index e035b39e..12dd95c3 100644
--- a/src/components/contact/collabora-section.tsx
+++ b/src/components/contact/collabora-section.tsx
@@ -1,27 +1,24 @@
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 
 export function CollaboraSection() {
   return (
-    <section className="flex w-full flex-row justify-center gap-8 px-6 min-[1616px]:justify-start min-[1616px]:px-36">
-      <div className="flex max-w-[959] flex-col gap-6">
-        <h2 className="typo-headline-medium md:typo-display-medium text-center min-[1616px]:text-start">
-          Vuoi sviluppare un progetto insieme a noi?
-        </h2>
+    <section className={CONTAINER}>
+      <div className="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center">
+        <h2 className={SECTION_TITLE}>Vuoi sviluppare un progetto insieme a noi?</h2>
 
-        <div className="flex min-w-0 flex-col gap-3 text-center md:text-start">
-          <p className="typo-body-large md:typo-headline-small text-center min-[1616px]:text-start">
+        <div className={`${SECTION_LEAD} flex flex-col gap-3`}>
+          <p>
             Siamo sempre felici di{" "}
-            <span className="text-blue-primary">collaborare con aziende o associazioni studentesche</span> per portare
+            <span className="text-blue-secondary">collaborare con aziende o associazioni studentesche</span> per portare
             agli studenti del PoliMi eventi e attività di valore.
           </p>
-          <p className="typo-body-large md:typo-headline-small text-center min-[1616px]:text-start">
-            Consulta la pagina dedicata per scoprire come possiamo unire le forze!
-          </p>
+          <p>Consulta la pagina dedicata per scoprire come possiamo unire le forze!</p>
         </div>
 
-        <Button variant="primary" size="lg" className="w-fit gap-2 self-center min-[1616px]:self-start" asChild>
+        <Button variant="primary" size="lg" className="mt-2" asChild>
           <Link href="/collabora">
             Collabora con noi
             <FiArrowUpRight />
diff --git a/src/components/contact/email-section.tsx b/src/components/contact/email-section.tsx
index dfa71c18..2e67be97 100644
--- a/src/components/contact/email-section.tsx
+++ b/src/components/contact/email-section.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link"
 import { ContactCard, type ContactCardData } from "../contact-card"
+import { CONTAINER, INLINE_LINK, SECTION_LEAD, SECTION_TITLE } from "../layout/page"
 
 const contactCards: ContactCardData[] = [
   {
@@ -18,8 +19,8 @@ const contactCards: ContactCardData[] = [
       <>
         Se vuoi candidarti come admin o come membro di un team, ti consigliamo di passare dal form disponibile nella
         pagina{" "}
-        <Link href="/join" className="text-blue-secondary underline underline-offset-2">
-          Struttura
+        <Link href="/join" className={INLINE_LINK}>
+          Unisciti a noi
         </Link>
         .
       </>
@@ -31,7 +32,7 @@ const contactCards: ContactCardData[] = [
     description: (
       <>
         Se sei un&apos;azienda o associazione e vuoi proporre una collaborazione, puoi anche consultare la pagina{" "}
-        <Link href="/collabora" className="text-blue-secondary underline underline-offset-2">
+        <Link href="/collabora" className={INLINE_LINK}>
           Collabora con Noi
         </Link>{" "}
         per capire cosa offriamo.
@@ -43,13 +44,11 @@ const contactCards: ContactCardData[] = [
 
 export function EmailSection() {
   return (
-    <section className="flex w-full flex-col gap-6 px-6 min-[1616px]:px-36">
-      <h2 className="typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent min-[1616px]:text-start">
-        Hai una richiesta specifica?
-      </h2>
-      <p className="typo-body-large md:typo-headline-small pb-6 text-center text-text-primary min-[1616px]:text-start">
+    <section className={`${CONTAINER} flex flex-col gap-6`}>
+      <h2 className={SECTION_TITLE}>Hai una richiesta specifica?</h2>
+      <p className={SECTION_LEAD}>
         Per tutto il resto,{" "}
-        <a href="mailto:info@polinetwork.org" className="text-blue-secondary hover:underline focus-visible:underline">
+        <a href="mailto:info@polinetwork.org" className={INLINE_LINK}>
           puoi scriverci direttamente
         </a>
         .
@@ -57,7 +56,8 @@ export function EmailSection() {
         Qui sotto trovi i contatti in base al tipo di richiesta.
       </p>
 
-      <div className="flex w-full flex-wrap justify-center gap-12 xl:gap-16 min-[1616px]:justify-start">
+      {/* 2×2 between one and four columns, so no card is left alone on a row */}
+      <div className="mt-4 grid gap-4 sm:grid-cols-2 sm:gap-6 xl:grid-cols-4">
         {contactCards.map((card) => (
           <ContactCard key={card.email} {...card} />
         ))}
diff --git a/src/components/contact/groups-section.tsx b/src/components/contact/groups-section.tsx
index 37440fcd..f8cf963a 100644
--- a/src/components/contact/groups-section.tsx
+++ b/src/components/contact/groups-section.tsx
@@ -1,40 +1,44 @@
 import Image from "next/image"
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
+import { CONTAINER, INLINE_LINK, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 
 export function GroupsSection() {
   return (
-    <section className="flex w-full flex-col items-center gap-21 px-6 min-[1616px]:flex-row min-[1616px]:items-end min-[1616px]:px-36">
-      <div className="flex flex-col gap-6 text-center min-[1616px]:min-w-158 min-[1616px]:flex-1 min-[1616px]:text-start">
-        <h2 className="typo-headline-medium md:typo-display-medium text-center min-[1616px]:text-start">
+    <section className={`${CONTAINER} grid items-center gap-10 xl:grid-cols-2 xl:gap-16`}>
+      <div className="flex flex-col items-center gap-6 text-center xl:items-start xl:text-start">
+        <h2 className={SECTION_TITLE}>
           Hai mille dubbi sul Poli?
           <br />
           Siamo pronti ad aiutarti!
         </h2>
 
-        <p className="typo-body-large md:typo-headline-small pb-6 text-center min-[1616px]:text-start">
+        <p className={`${SECTION_LEAD} max-w-2xl`}>
           Il modo più rapido per ottenere risposte su esami, burocrazia universitaria o sulla vita al Politecnico è{" "}
-          <Link href="/groups" className="text-blue-secondary hover:underline focus-visible:underline">
+          <Link href="/groups" className={INLINE_LINK}>
             entrare nel gruppo del tuo corso
           </Link>
           , su Telegram o su WhatsApp, dove gli admin sono presenti ogni giorno.
         </p>
-        <Button variant="primary" size="lg" className="w-fit gap-2 self-center min-[1616px]:self-start">
-          Trova il tuo gruppo
-          <FiArrowUpRight />
+
+        <Button variant="primary" size="lg" className="mt-2" asChild>
+          <Link href="/groups">
+            Trova il tuo gruppo
+            <FiArrowUpRight />
+          </Link>
         </Button>
       </div>
 
-      <div className="flex w-full items-center justify-center min-[1616px]:w-auto min-[1616px]:flex-1">
-        <Image
-          src="/contact-group.png"
-          alt="Foto di gruppo della community PoliNetwork"
-          width={721}
-          height={342}
-          className="h-auto w-full max-w-180.25 rounded-rectangles object-cover min-[1616px]:min-w-180.25"
-        />
-      </div>
+      <Image
+        src="/contact-group.png"
+        alt="Foto di gruppo della community PoliNetwork"
+        width={512}
+        height={246}
+        sizes="(min-width: 80rem) 600px, (min-width: 42rem) 672px, 100vw"
+        // The source is only 512px wide: capped at 672px so it never stretches past ~1.3x
+        className="mx-auto h-auto w-full max-w-2xl rounded-rectangles xl:max-w-none"
+      />
     </section>
   )
 }
diff --git a/src/components/home/projects.tsx b/src/components/home/projects.tsx
index d0078106..99ec6578 100644
--- a/src/components/home/projects.tsx
+++ b/src/components/home/projects.tsx
@@ -2,9 +2,9 @@ import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
 import { CardCaption } from "@/components/card-caption"
 import { CONTAINER } from "@/components/layout/page"
+import { PeekCarousel } from "@/components/peek-carousel"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
-import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
 
 const featuredCards = [
   {
@@ -31,7 +31,7 @@ const featuredCards = [
   },
 ] as const
 
-function ProjectCard({ className, ...card }: (typeof featuredCards)[number] & { className?: string }) {
+function FeaturedProjectCard({ className, ...card }: (typeof featuredCards)[number] & { className?: string }) {
   return (
     <CardCaption
       {...card}
@@ -79,23 +79,16 @@ export function Projects() {
 
       <div className="mx-auto hidden w-full max-w-4xl auto-rows-fr gap-6 pt-8 sm:grid sm:grid-cols-2 xl:max-w-none xl:pt-0">
         {featuredCards.map((card) => (
-          <ProjectCard key={card.title} {...card} className="h-auto w-full p-6" />
+          <FeaturedProjectCard key={card.title} {...card} className="h-auto w-full p-6" />
         ))}
       </div>
 
-      {/* Mobile: the next card peeks in from the edge, so the row reads as scrollable */}
-      <div className="-mx-6 pt-6 sm:hidden">
-        <Carousel opts={{ align: "start" }}>
-          <CarouselContent className="mr-6 ml-2">
-            {featuredCards.map((card) => (
-              <CarouselItem key={card.title} className="basis-[85%]">
-                <ProjectCard {...card} className="h-full w-full p-6" />
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselDots className="mt-6" />
-        </Carousel>
-      </div>
+      <PeekCarousel
+        items={featuredCards}
+        getKey={(card) => card.title}
+        render={(card) => <FeaturedProjectCard {...card} className="h-full w-full p-6" />}
+        className="pt-6 sm:hidden"
+      />
     </section>
   )
 }
diff --git a/src/components/layout/page.ts b/src/components/layout/page.ts
index ca8cc332..495b9d2a 100644
--- a/src/components/layout/page.ts
+++ b/src/components/layout/page.ts
@@ -24,3 +24,6 @@ export const PAGE_MAIN = "flex w-full flex-col gap-24 pb-24 md:gap-32 md:pb-32 x
  */
 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`
+
+/** A section made of a heading block followed by its content. */
+export const SECTION_STACK = `${CONTAINER} flex flex-col gap-10 md:gap-14`
diff --git a/src/components/peek-carousel.tsx b/src/components/peek-carousel.tsx
new file mode 100644
index 00000000..5d2afda2
--- /dev/null
+++ b/src/components/peek-carousel.tsx
@@ -0,0 +1,34 @@
+import type { ReactNode } from "react"
+import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
+import { cn } from "@/lib/utils"
+
+/**
+ * Phone carousel whose next card peeks in from the screen edge, so the row reads as scrollable.
+ * It bleeds over the CONTAINER's 24px phone gutter: use it below `sm` only.
+ */
+export function PeekCarousel<T>({
+  items,
+  getKey,
+  render,
+  className,
+}: {
+  items: readonly T[]
+  getKey: (item: T) => string | number
+  render: (item: T) => ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn("-mx-6", className)}>
+      <Carousel opts={{ align: "start" }}>
+        <CarouselContent className="mr-6 ml-2">
+          {items.map((item) => (
+            <CarouselItem key={getKey(item)} className="basis-[85%]">
+              {render(item)}
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselDots className="mt-6" />
+      </Carousel>
+    </div>
+  )
+}
diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx
index 61345010..e320f5b2 100644
--- a/src/components/projects/collection.tsx
+++ b/src/components/projects/collection.tsx
@@ -1,94 +1,75 @@
 "use client"
 
-import { useId, useState } from "react"
-import { FiArrowDown, FiArrowUp, FiSearch, FiUploadCloud } from "react-icons/fi"
-import type { ApiOutput } from "@/types"
-import { CardCaption } from "../card-caption"
-import { Button } from "../ui/button"
-import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
+import { useState } from "react"
+import { FiSearch } from "react-icons/fi"
+import { INLINE_LINK, SECTION_STACK, SECTION_TITLE } from "../layout/page"
 import { Input } from "../ui/input"
+import { ProjectList, ProjectsEmpty } from "./project-list"
+import type { Project } from "./resources"
 
-type Project = ApiOutput["web"]["projects"]["getAllProjects"][number]
-
-const INITIAL_PROJECT_COUNT = 8
+/** Case- and accent-insensitive, so "universita" finds "Università". */
+function normalize(text: string) {
+  return text
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+    .toLowerCase()
+}
 
-export function Collection({ projects }: { projects: Project[] }) {
-  const [expanded, setExpanded] = useState(false)
-  const gridId = useId()
-  const visibleProjects = expanded ? projects : projects.slice(0, INITIAL_PROJECT_COUNT)
+/** Lists the collection; a search looks through every project on the page, novelties and deprecated ones included. */
+export function Collection({ projects, searchable }: { projects: Project[]; searchable: Project[] }) {
+  const [query, setQuery] = useState("")
+  const needle = normalize(query.trim())
+  const words = needle.split(/\s+/)
+  const matches = needle
+    ? searchable.filter((project) => {
+        const text = normalize(`${project.title} ${project.descriptionIt}`)
+        return words.every((word) => text.includes(word))
+      })
+    : projects
 
   return (
-    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-12 px-4 sm:gap-22">
-      <div className="flex flex-col items-center gap-8">
-        <h2 className="typo-headline-medium sm:typo-display-medium text-center">
+    <section aria-labelledby="raccolta-title" className={SECTION_STACK}>
+      <div className="flex flex-col items-center gap-8 text-center">
+        <h2 id="raccolta-title" className={SECTION_TITLE}>
           Esplora la raccolta completa dei progetti
         </h2>
-        <div className="flex w-full justify-center">
+        {searchable.length > 0 && (
           <Input
             icon={<FiSearch className="h-5 w-5" />}
-            type="text"
-            placeholder="Search by name"
-            aria-label="Search by name"
-            containerClassName="max-w-xl"
+            type="search"
+            placeholder="Cerca un progetto"
+            aria-label="Cerca un progetto per nome o descrizione"
+            containerClassName="w-full max-w-xl"
             className="typo-body-medium"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
           />
-        </div>
+        )}
       </div>
 
-      {projects.length === 0 ? (
-        <p className="typo-body-large text-center">Nessun progetto disponibile al momento.</p>
-      ) : (
-        <>
-          <div className="hidden flex-col gap-12 sm:flex">
-            <div id={gridId} className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
-              {visibleProjects.map((project) => (
-                <CardCaption
-                  key={project.id}
-                  title={project.title}
-                  caption={project.descriptionIt}
-                  icon={FiUploadCloud}
-                  href={`/projects/${project.id}`}
-                />
-              ))}
-            </div>
-            {projects.length > INITIAL_PROJECT_COUNT && (
-              <div className="flex justify-center">
-                <Button
-                  type="button"
-                  variant="primary"
-                  size="lg"
-                  aria-expanded={expanded}
-                  aria-controls={gridId}
-                  onClick={() => setExpanded((previous) => !previous)}
-                >
-                  {expanded ? "Mostra di meno" : "Mostra di più"}
-                  {expanded ? <FiArrowUp aria-hidden="true" /> : <FiArrowDown aria-hidden="true" />}
-                </Button>
-              </div>
+      <p aria-live="polite" className="sr-only">
+        {needle && `${matches.length} progetti trovati`}
+      </p>
+      <ProjectList
+        // Remount on a new search, so the list starts collapsed and the carousel from the first card
+        key={needle}
+        projects={matches}
+        initialCount={needle ? undefined : 8}
+        empty={
+          <ProjectsEmpty>
+            {needle ? (
+              <>Nessun progetto corrisponde a “{query.trim()}”.</>
+            ) : (
+              <>
+                La raccolta è vuota per ora.{" "}
+                <a href="#proponi" className={INLINE_LINK}>
+                  Proponi il primo progetto
+                </a>
+              </>
             )}
-          </div>
-
-          <div className="flex w-full items-center justify-center sm:hidden">
-            <Carousel className="w-full">
-              <CarouselContent>
-                {projects.map((project) => (
-                  <CarouselItem key={project.id}>
-                    <div className="flex justify-center">
-                      <CardCaption
-                        title={project.title}
-                        caption={project.descriptionIt}
-                        icon={FiUploadCloud}
-                        href={`/projects/${project.id}`}
-                      />
-                    </div>
-                  </CarouselItem>
-                ))}
-              </CarouselContent>
-              <CarouselDots className="mt-8" />
-            </Carousel>
-          </div>
-        </>
-      )}
+          </ProjectsEmpty>
+        }
+      />
     </section>
   )
 }
diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx
index ee7440ed..98a8fb75 100644
--- a/src/components/projects/community-news.tsx
+++ b/src/components/projects/community-news.tsx
@@ -1,68 +1,27 @@
-import { FiCrop } from "react-icons/fi"
-import type { ApiOutput } from "@/types"
-import { CardCaption } from "../card-caption"
-import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
-import { Hero } from "../ui/hero"
-
-type Project = ApiOutput["web"]["projects"]["getAllProjects"][number]
+import { INLINE_LINK, SECTION_LEAD, SECTION_STACK, SECTION_TITLE } from "../layout/page"
+import { ProjectList, ProjectsEmpty } from "./project-list"
+import type { Project } from "./resources"
 
 export function CommunityNews({ projects }: { projects: Project[] }) {
   return (
-    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-48 px-4 py-49">
-      <Hero title="Projects" description=" Esplora e contribuisci ai progetti degli studenti" />
-
-      <div className="mx-auto flex w-full flex-col gap-14 sm:w-fit">
-        <div className="flex flex-col items-center gap-2 sm:items-start">
-          <h3 className="typo-headline-medium sm:typo-display-medium text-center sm:text-left">
-            Le novità della community
-          </h3>
-          <p className="typo-body-large text-center sm:text-left">
-            Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico
-          </p>
-        </div>
-
-        {projects.length === 0 ? (
-          <p className="typo-body-large text-center sm:text-left">Nessuna novità disponibile al momento.</p>
-        ) : (
-          <>
-            {/* Desktop Grid */}
-            <div className="hidden 1xl:grid-cols-4 justify-items-center gap-6 md:grid md:grid-cols-2">
-              {projects.map((project) => (
-                <CardCaption
-                  key={project.id}
-                  title={project.title}
-                  caption={project.descriptionIt}
-                  icon={FiCrop}
-                  iconPosition="right"
-                  href={`/projects/${project.id}`}
-                />
-              ))}
-            </div>
-
-            {/* Mobile Carousel */}
-            <div className="sm:hidden">
-              <Carousel className="w-full">
-                <CarouselContent>
-                  {projects.map((project) => (
-                    <CarouselItem key={project.id}>
-                      <div className="flex justify-center">
-                        <CardCaption
-                          title={project.title}
-                          caption={project.descriptionIt}
-                          icon={FiCrop}
-                          iconPosition="right"
-                          href={`/projects/${project.id}`}
-                        />
-                      </div>
-                    </CarouselItem>
-                  ))}
-                </CarouselContent>
-                <CarouselDots className="mt-8" />
-              </Carousel>
-            </div>
-          </>
-        )}
+    <section aria-labelledby="novita-title" className={SECTION_STACK}>
+      <div className="flex flex-col gap-4">
+        <h2 id="novita-title" className={SECTION_TITLE}>
+          Le novità della community
+        </h2>
+        <p className={SECTION_LEAD}>Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico.</p>
       </div>
+      <ProjectList
+        projects={projects}
+        empty={
+          <ProjectsEmpty>
+            Nessuna novità al momento.{" "}
+            <a href="#proponi" className={INLINE_LINK}>
+              Hai un'idea? Proponila
+            </a>
+          </ProjectsEmpty>
+        }
+      />
     </section>
   )
 }
diff --git a/src/components/projects/deprecated.tsx b/src/components/projects/deprecated.tsx
index 34a0fd08..96b23070 100644
--- a/src/components/projects/deprecated.tsx
+++ b/src/components/projects/deprecated.tsx
@@ -1,87 +1,24 @@
-"use client"
-
-import { useId, useState } from "react"
-import { FiArrowDown, FiArrowUp, FiUploadCloud } from "react-icons/fi"
-import type { ApiOutput } from "@/types"
-import { CardCaption } from "../card-caption"
-import { Button } from "../ui/button"
-import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
-
-type Project = ApiOutput["web"]["projects"]["getAllProjects"][number]
-
-const INITIAL_PROJECT_COUNT = 8
+import { SECTION_LEAD, SECTION_STACK, SECTION_TITLE } from "../layout/page"
+import { ProjectList, ProjectsEmpty } from "./project-list"
+import type { Project } from "./resources"
 
 export function Deprecated({ projects }: { projects: Project[] }) {
-  const [expanded, setExpanded] = useState(false)
-  const gridId = useId()
-  const visibleProjects = expanded ? projects : projects.slice(0, INITIAL_PROJECT_COUNT)
-
   return (
-    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center px-4 py-49">
-      <div className="flex w-full flex-col gap-14 sm:w-fit">
-        <div className="flex flex-col items-center gap-2 sm:items-start">
-          <h3 className="typo-headline-medium sm:typo-display-medium text-center sm:text-left">Progetti deprecati</h3>
-          <p className="typo-body-large text-center sm:text-left">
-            Qui raccogliamo i progetti non più aggiornati o attivi. <br />
-            Puoi contribuire a riportarli in vita, migliorarli o usarli come base per nuove idee.
-          </p>
-        </div>
-
-        {projects.length === 0 ? (
-          <p className="typo-body-large text-center sm:text-left">Nessun progetto deprecato al momento.</p>
-        ) : (
-          <>
-            <div className="hidden flex-col gap-12 sm:flex">
-              <div id={gridId} className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
-                {visibleProjects.map((project) => (
-                  <CardCaption
-                    key={project.id}
-                    title={project.title}
-                    caption={project.descriptionIt}
-                    icon={FiUploadCloud}
-                    href={`/projects/${project.id}`}
-                  />
-                ))}
-              </div>
-              {projects.length > INITIAL_PROJECT_COUNT && (
-                <div className="flex justify-center">
-                  <Button
-                    type="button"
-                    variant="primary"
-                    size="lg"
-                    aria-expanded={expanded}
-                    aria-controls={gridId}
-                    onClick={() => setExpanded((previous) => !previous)}
-                  >
-                    {expanded ? "Mostra di meno" : "Mostra di più"}
-                    {expanded ? <FiArrowUp aria-hidden="true" /> : <FiArrowDown aria-hidden="true" />}
-                  </Button>
-                </div>
-              )}
-            </div>
-
-            <div className="flex w-full items-center justify-center sm:hidden">
-              <Carousel className="w-full">
-                <CarouselContent>
-                  {projects.map((project) => (
-                    <CarouselItem key={project.id}>
-                      <div className="flex justify-center">
-                        <CardCaption
-                          title={project.title}
-                          caption={project.descriptionIt}
-                          icon={FiUploadCloud}
-                          href={`/projects/${project.id}`}
-                        />
-                      </div>
-                    </CarouselItem>
-                  ))}
-                </CarouselContent>
-                <CarouselDots className="mt-8" />
-              </Carousel>
-            </div>
-          </>
-        )}
+    <section aria-labelledby="deprecati-title" className={SECTION_STACK}>
+      <div className="flex flex-col gap-4">
+        <h2 id="deprecati-title" className={SECTION_TITLE}>
+          Progetti deprecati
+        </h2>
+        <p className={`${SECTION_LEAD} max-w-200`}>
+          Qui raccogliamo i progetti non più aggiornati o attivi. Puoi contribuire a riportarli in vita, migliorarli o
+          usarli come base per nuove idee.
+        </p>
       </div>
+      <ProjectList
+        projects={projects}
+        initialCount={8}
+        empty={<ProjectsEmpty>Nessun progetto deprecato al momento.</ProjectsEmpty>}
+      />
     </section>
   )
 }
diff --git a/src/components/projects/project-card.tsx b/src/components/projects/project-card.tsx
new file mode 100644
index 00000000..291485d4
--- /dev/null
+++ b/src/components/projects/project-card.tsx
@@ -0,0 +1,32 @@
+import { FiArrowRight } from "react-icons/fi"
+import { CardCaption } from "../card-caption"
+import { getProjectResources, type Project, resourceDetails } from "./resources"
+
+/** A project in the lists: opens the project page, and says what it offers there when the project has a link. */
+export function ProjectCard({ project }: { project: Project }) {
+  const [resource] = getProjectResources(project)
+  const details = resource && resourceDetails[resource.kind]
+
+  return (
+    <CardCaption
+      title={project.title}
+      caption={project.descriptionIt}
+      image={project.logo ?? undefined}
+      href={`/projects/${project.id}`}
+      className="h-full w-full gap-3 p-6"
+      titleClassName="typo-title-large wrap-anywhere text-balance"
+      captionClassName="line-clamp-4 text-pretty"
+      footer={
+        <span className="typo-label-large flex items-center gap-3 pt-3">
+          {details && (
+            <span className="flex items-center gap-2 text-slate-600">
+              <details.icon aria-hidden className="size-4 shrink-0" />
+              {details.title}
+            </span>
+          )}
+          <FiArrowRight aria-hidden className="ml-auto size-4 shrink-0 text-blue-secondary" />
+        </span>
+      }
+    />
+  )
+}
diff --git a/src/components/projects/project-list.tsx b/src/components/projects/project-list.tsx
new file mode 100644
index 00000000..72ee5c4a
--- /dev/null
+++ b/src/components/projects/project-list.tsx
@@ -0,0 +1,74 @@
+"use client"
+
+import { type ReactNode, useId, useState } from "react"
+import { FiArrowDown, FiArrowUp } from "react-icons/fi"
+import { PeekCarousel } from "../peek-carousel"
+import { Button } from "../ui/button"
+import { ProjectCard } from "./project-card"
+import type { Project } from "./resources"
+
+/**
+ * Cards keep a readable width at every viewport (16rem min, one fr max), so the column count follows the space
+ * instead of jumping at fixed breakpoints. On phones the list becomes a carousel with the next card peeking in.
+ */
+export function ProjectList({
+  projects,
+  initialCount,
+  empty,
+}: {
+  projects: Project[]
+  /** Show only this many cards on larger screens until expanded. */
+  initialCount?: number
+  empty: ReactNode
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const gridId = useId()
+
+  if (projects.length === 0) return empty
+
+  const collapsible = initialCount !== undefined && projects.length > initialCount
+  const visible = collapsible && !expanded ? projects.slice(0, initialCount) : projects
+
+  return (
+    <>
+      <div className="hidden flex-col items-center gap-12 sm:flex">
+        <ul id={gridId} className="grid w-full grid-cols-[repeat(auto-fill,minmax(min(100%,16rem),1fr))] gap-6">
+          {visible.map((project) => (
+            <li key={project.id} className="min-w-0">
+              <ProjectCard project={project} />
+            </li>
+          ))}
+        </ul>
+        {collapsible && (
+          <Button
+            type="button"
+            variant="primary"
+            size="lg"
+            aria-expanded={expanded}
+            aria-controls={gridId}
+            onClick={() => setExpanded((previous) => !previous)}
+          >
+            {expanded ? "Mostra di meno" : `Mostra tutti (${projects.length})`}
+            {expanded ? <FiArrowUp aria-hidden="true" /> : <FiArrowDown aria-hidden="true" />}
+          </Button>
+        )}
+      </div>
+
+      <PeekCarousel
+        items={projects}
+        getKey={(project) => project.id}
+        render={(project) => <ProjectCard project={project} />}
+        className="sm:hidden"
+      />
+    </>
+  )
+}
+
+/** Shown in place of an empty list: says so plainly and points to the one thing the reader can do about it. */
+export function ProjectsEmpty({ children }: { children: ReactNode }) {
+  return (
+    <div className="typo-body-large wrap-anywhere rounded-rectangles border border-slate-300 border-dashed px-6 py-10 text-center text-slate-600">
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/projects/resources.ts b/src/components/projects/resources.ts
index 09227e03..15759167 100644
--- a/src/components/projects/resources.ts
+++ b/src/components/projects/resources.ts
@@ -1,11 +1,11 @@
 import type { IconType } from "react-icons"
-import { FaAndroid, FaApple, FaGithub, FaLinux, FaWindows } from "react-icons/fa6"
+import { FaAndroid, FaApple, FaGithub, FaLinux, FaTelegram, FaWindows } from "react-icons/fa6"
 import { FiGlobe } from "react-icons/fi"
 import type { ApiOutput } from "@/types"
 
 export type Project = ApiOutput["web"]["projects"]["getAllProjects"][number]
 
-export type ProjectResourceKind = "web" | "windows" | "macos" | "linux" | "android" | "ios" | "source"
+export type ProjectResourceKind = "web" | "telegram" | "windows" | "macos" | "linux" | "android" | "ios" | "source"
 
 /** A way to use or get a project: a download for a platform, the web app or the source code. */
 export type ProjectResource = { kind: ProjectResourceKind; href: string }
@@ -20,6 +20,12 @@ export const resourceDetails: Record<
     cta: "Apri il sito",
     icon: FiGlobe,
   },
+  telegram: {
+    title: "Telegram",
+    description: "Lo trovi su Telegram, senza installare nient’altro.",
+    cta: "Apri su Telegram",
+    icon: FaTelegram,
+  },
   windows: {
     title: "Windows",
     description: "Scarica l’installer per Windows.",
@@ -40,10 +46,14 @@ export const resourceDetails: Record<
 
 /**
  * The backend does not expose per-platform downloads yet: until it does, the only resource is the project `link`,
- * shown as source code when it points to a repository and as the web app otherwise. Replace this with the API field.
+ * classified by its host: a repository, a Telegram bot or channel, or else the web app. Replace this with the API field.
  */
 export function getProjectResources(project: Project): ProjectResource[] {
   if (!project.link) return []
-  const isRepository = /^https:\/\/(github\.com|gitlab\.com)\//.test(project.link)
-  return [{ kind: isRepository ? "source" : "web", href: project.link }]
+  const kind = /^https:\/\/(github\.com|gitlab\.com)\//.test(project.link)
+    ? "source"
+    : /^https:\/\/t\.me\//.test(project.link)
+      ? "telegram"
+      : "web"
+  return [{ kind, href: project.link }]
 }
diff --git a/src/components/projects/upload.tsx b/src/components/projects/upload.tsx
index 5bcd90bf..b057c9e2 100644
--- a/src/components/projects/upload.tsx
+++ b/src/components/projects/upload.tsx
@@ -1,22 +1,24 @@
 import { FiMail } from "react-icons/fi"
 import { CardCaption } from "../card-caption"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "../layout/page"
 
 const cards = [
   {
     title: "Contatti",
     caption: (
-      <div className="flex flex-col gap-2">
-        <span className="flex items-center gap-2">
-          <FiMail /> info@polinetwork.org
-        </span>
-      </div>
+      <a
+        href="mailto:info@polinetwork.org"
+        className="typo-body-large flex w-fit items-center gap-2 underline-offset-4 hover:underline focus-visible:underline"
+      >
+        <FiMail aria-hidden className="shrink-0" /> info@polinetwork.org
+      </a>
     ),
   },
   {
     title: "Requisiti",
     caption: (
-      <ul className="list-disc pl-4">
-        <li>opensource</li>
+      <ul className="typo-body-large list-disc pl-5">
+        <li>open source</li>
         <li>utile alla community</li>
         <li>senza scopo di lucro</li>
       </ul>
@@ -26,32 +28,32 @@ const cards = [
 
 export function Upload() {
   return (
-    <section className="mx-auto flex min-h-screen max-w-300 flex-col items-center justify-center gap-12 px-4 py-16 md:flex-row md:gap-24 md:px-12 lg:gap-48">
-      <div className="flex max-w-xs flex-col items-start gap-8">
-        <div className="flex flex-col gap-2">
-          <h2 className="typo-headline-medium md:typo-display-medium">Hai un'idea?</h2>
-          <p className="typo-title-large md:typo-headline-medium text-blue-primary">Proponila qui!</p>
-        </div>
-        <div className="flex flex-col gap-4">
-          <p className="typo-body-large">
+    <section id="proponi" aria-labelledby="proponi-title" className={`${CONTAINER} scroll-mt-32`}>
+      <div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,22rem)] lg:items-center lg:gap-16">
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <h2 id="proponi-title" className={SECTION_TITLE}>
+              Hai un'idea?
+            </h2>
+            <p className="typo-headline-small text-blue-secondary">Proponila qui!</p>
+          </div>
+          <p className={SECTION_LEAD}>
             Qui puoi proporre nuovi progetti o suggerire migliorie al sito. Il team di PoliNetwork può aiutarti a
             sviluppare la tua idea e, se rispetta i requisiti, pubblicarla qui.
           </p>
           <p className="typo-body-large">
             Dopo l'invio riceverai una risposta dai nostri admin con le istruzioni per proseguire.
           </p>
-        </div>
-        <div className="flex flex-col gap-4">
-          <p className="typo-body-medium text-text-secondary">
+          <p className="typo-body-small text-slate-600">
             I diritti dei progetti rimangono tutti dei rispettivi progettisti, PoliNetwork non si assume responsabilità.
           </p>
         </div>
-      </div>
 
-      <div className="flex flex-col gap-6">
-        {cards.map((card) => (
-          <CardCaption key={card.title} {...card} className="h-auto" />
-        ))}
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-1">
+          {cards.map((card) => (
+            <CardCaption key={card.title} {...card} className="h-auto w-full p-6" />
+          ))}
+        </div>
       </div>
     </section>
   )