@prenta/admin 0.92.0 → 0.93.0

package/src/views/page-editor/SectionsPanel.tsx

@@ -37,24 +37,161 @@ interface SectionsPanelProps {
   selectedId: string | null
   canEdit: boolean
   onSelect: (id: string) => void
-  onReorder: (orderedIds: string[]) => void
   onToggleVisibility: (id: string) => void
-  onDuplicate: (id: string) => void
-  onRequestDelete: (id: string) => void
-  onAdd: () => void
+  /**
+   * Permit structural editing — add, reorder, duplicate, delete.
+   *
+   * Defaults to FALSE. Pages and posts are design-owned: their section list
+   * comes from the template in code, and an editor changes copy, CTAs and
+   * imagery, never layout or order. Only the template editor — the surface
+   * that authors the template itself — opts in.
+   *
+   * The default is the restrictive one on purpose: a new consumer of this
+   * panel that forgets the flag gets the safe behaviour, not an editor that
+   * can quietly restructure a design-owned page.
+   */
+  structural?: boolean
+  /** Required when `structural`. */
+  onReorder?: (orderedIds: string[]) => void
+  onDuplicate?: (id: string) => void
+  onRequestDelete?: (id: string) => void
+  onAdd?: () => void
 }
 
-export function SectionsPanel({
+/**
+ * Standalone panel — its own aside, header, and width. Used by the post
+ * TEMPLATE editor, which has no rail. The page and post editors render
+ * `SectionsList` inside `EditorRail` instead, so the rail owns the chrome.
+ */
+export function SectionsPanel(props: SectionsPanelProps) {
+  return (
+    <aside
+      className="bg-card border-border flex h-full w-72 shrink-0 flex-col border-r"
+      aria-label="Page sections"
+    >
+      <div className="border-border flex items-center justify-between border-b px-6 py-4">
+        <div className="flex items-center gap-2">
+          <h2 className="text-foreground text-sm font-medium">Sections</h2>
+          <span className="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium tabular-nums">
+            {props.sections.length}
+          </span>
+        </div>
+      </div>
+      <SectionsList {...props} />
+    </aside>
+  )
+}
+
+/**
+ * The section outline itself — list plus footer. Fills whatever container it
+ * is given, so it works both inside the standalone panel above and inside the
+ * editor rail's Sections tab.
+ */
+export function SectionsList({
   sections,
   selectedId,
   canEdit,
   onSelect,
-  onReorder,
   onToggleVisibility,
+  structural = false,
+  onReorder,
   onDuplicate,
   onRequestDelete,
   onAdd,
 }: SectionsPanelProps) {
+  return (
+    <>
+      <div className="min-h-0 flex-1 overflow-y-auto p-2">
+        {sections.length === 0 ? (
+          <p className="text-muted-foreground px-2 py-6 text-center text-sm">
+            {structural
+              ? 'No sections yet. Add one below to get started.'
+              : 'This template renders no sections.'}
+          </p>
+        ) : structural ? (
+          <StructuralList
+            sections={sections}
+            selectedId={selectedId}
+            canEdit={canEdit}
+            onSelect={onSelect}
+            onReorder={onReorder}
+            onToggleVisibility={onToggleVisibility}
+            onDuplicate={onDuplicate}
+            onRequestDelete={onRequestDelete}
+          />
+        ) : (
+          <ul className="space-y-1">
+            {sections.map((section) => (
+              <SectionRow
+                key={section.id}
+                section={section}
+                selected={section.id === selectedId}
+                canEdit={canEdit}
+                structural={false}
+                onSelect={onSelect}
+                onToggleVisibility={onToggleVisibility}
+              />
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {structural ? (
+        <div className="border-border border-t p-3">
+          <button
+            type="button"
+            onClick={onAdd}
+            disabled={!canEdit}
+            className="border-border text-foreground hover:bg-accent flex w-full items-center justify-center gap-2 rounded-lg border border-dashed px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Plus className="h-4 w-4" aria-hidden />
+            Add Section
+          </button>
+        </div>
+      ) : (
+        <DesignOwnedNote />
+      )}
+    </>
+  )
+}
+
+/**
+ * Explains the absence of add / reorder / delete. Without it the panel reads
+ * as broken rather than deliberate — "where did Add Section go" is the first
+ * question a returning editor asks.
+ */
+function DesignOwnedNote() {
+  return (
+    <div className="border-border bg-background text-muted-foreground flex gap-2 border-t px-3 py-3 text-[11.5px] leading-normal">
+      <Lock className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
+      <p>
+        <strong className="text-foreground font-semibold">Layout is design-owned.</strong> Sections
+        and styling are built in code — here you edit headings, body copy, CTAs, and imagery. Hide a
+        section to drop it from the live page.
+      </p>
+    </div>
+  )
+}
+
+function StructuralList({
+  sections,
+  selectedId,
+  canEdit,
+  onSelect,
+  onReorder,
+  onToggleVisibility,
+  onDuplicate,
+  onRequestDelete,
+}: {
+  sections: PageSection[]
+  selectedId: string | null
+  canEdit: boolean
+  onSelect: (id: string) => void
+  onReorder?: (orderedIds: string[]) => void
+  onToggleVisibility: (id: string) => void
+  onDuplicate?: (id: string) => void
+  onRequestDelete?: (id: string) => void
+}) {
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
@@ -70,164 +207,114 @@ export function SectionsPanel({
     const next = ids.slice()
     const [moved] = next.splice(from, 1)
     next.splice(to, 0, moved!)
-    onReorder(next)
+    onReorder?.(next)
   }
 
   return (
-    <aside
-      className="bg-card border-border flex h-full w-72 shrink-0 flex-col border-r"
-      aria-label="Page sections"
-    >
-      <div className="border-border flex items-center justify-between border-b px-6 py-4">
-        <div className="flex items-center gap-2">
-          <h2 className="text-foreground text-sm font-medium">Sections</h2>
-          <span className="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium tabular-nums">
-            {sections.length}
-          </span>
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto p-2">
-        {sections.length === 0 ? (
-          <p className="text-muted-foreground px-2 py-6 text-center text-sm">
-            No sections yet. Add one below to get started.
-          </p>
-        ) : (
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-          >
-            <SortableContext
-              items={sections.map((s) => s.id)}
-              strategy={verticalListSortingStrategy}
-            >
-              <ul className="space-y-1">
-                {sections.map((section) => (
-                  <SortableSectionItem
-                    key={section.id}
-                    section={section}
-                    selected={section.id === selectedId}
-                    canEdit={canEdit}
-                    onSelect={onSelect}
-                    onToggleVisibility={onToggleVisibility}
-                    onDuplicate={onDuplicate}
-                    onRequestDelete={onRequestDelete}
-                  />
-                ))}
-              </ul>
-            </SortableContext>
-          </DndContext>
-        )}
-      </div>
-
-      <div className="border-border border-t p-3">
-        <button
-          type="button"
-          onClick={onAdd}
-          disabled={!canEdit}
-          className="border-border text-foreground hover:bg-accent flex w-full items-center justify-center gap-2 rounded-lg border border-dashed px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          <Plus className="h-4 w-4" aria-hidden />
-          Add Section
-        </button>
-      </div>
-    </aside>
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={sections.map((s) => s.id)} strategy={verticalListSortingStrategy}>
+        <ul className="space-y-1">
+          {sections.map((section) => (
+            <SortableSectionItem
+              key={section.id}
+              section={section}
+              selected={section.id === selectedId}
+              canEdit={canEdit}
+              onSelect={onSelect}
+              onToggleVisibility={onToggleVisibility}
+              onDuplicate={onDuplicate}
+              onRequestDelete={onRequestDelete}
+            />
+          ))}
+        </ul>
+      </SortableContext>
+    </DndContext>
   )
 }
 
-interface SortableItemProps {
+interface RowProps {
   section: PageSection
   selected: boolean
   canEdit: boolean
+  structural: boolean
   onSelect: (id: string) => void
   onToggleVisibility: (id: string) => void
-  onDuplicate: (id: string) => void
-  onRequestDelete: (id: string) => void
+  onDuplicate?: (id: string) => void
+  onRequestDelete?: (id: string) => void
+  /** Drag affordance, supplied only by the sortable wrapper. */
+  dragHandle?: React.ReactNode
+  dragging?: boolean
 }
 
-function SortableSectionItem({
+function SectionRow({
   section,
   selected,
   canEdit,
+  structural,
   onSelect,
   onToggleVisibility,
   onDuplicate,
   onRequestDelete,
-}: SortableItemProps) {
-  // Unmanaged (externally-managed) sections are read-only: no drag, duplicate,
-  // delete, or visibility toggle — only selectable to view the read-only notice.
+  dragHandle,
+  dragging,
+}: RowProps) {
+  // Unmanaged (externally-managed) sections are read-only even in a structural
+  // panel: no drag, duplicate, delete, or visibility toggle — only selectable
+  // to view the read-only notice.
   const locked = section.unmanaged === true
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: section.id,
-    disabled: !canEdit || locked,
-  })
   const Icon = sectionIconFor(section.sectionType)
 
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    zIndex: isDragging ? 10 : undefined,
-  }
-
   return (
-    <li ref={setNodeRef} style={style}>
-      <div
-        className={`group flex items-center gap-2 rounded-lg border px-2 py-2 ${
-          selected ? 'border-primary bg-accent' : 'hover:bg-accent/60 border-transparent'
-        } ${isDragging ? 'shadow-md' : ''}`}
+    <div
+      className={`group flex items-center gap-2 rounded-lg border px-2 py-2 ${
+        selected ? 'border-primary bg-accent' : 'hover:bg-accent/60 border-transparent'
+      } ${dragging ? 'shadow-md' : ''}`}
+    >
+      {dragHandle}
+
+      <button
+        type="button"
+        onClick={() => onSelect(section.id)}
+        className="flex min-w-0 flex-1 items-center gap-2 text-left"
       >
-        <button
-          type="button"
-          className="text-muted-foreground hover:text-foreground shrink-0 cursor-grab touch-none disabled:cursor-not-allowed disabled:opacity-40"
-          aria-label={`Drag to reorder ${section.name}`}
-          disabled={!canEdit || locked}
-          {...attributes}
-          {...listeners}
+        <span className="bg-muted text-muted-foreground flex h-7 w-7 shrink-0 items-center justify-center rounded-md">
+          <Icon className="h-4 w-4" aria-hidden />
+        </span>
+        <span
+          className={`truncate text-sm ${section.visible ? 'text-foreground' : 'text-muted-foreground line-through'}`}
         >
-          <GripVertical className="h-4 w-4" aria-hidden />
-        </button>
+          {section.name}
+        </span>
+      </button>
 
-        <button
-          type="button"
-          onClick={() => onSelect(section.id)}
-          className="flex min-w-0 flex-1 items-center gap-2 text-left"
+      {locked ? (
+        <span
+          className="text-muted-foreground shrink-0 p-1"
+          title="Managed outside the editor — read-only"
+          aria-label={`${section.name} is managed outside the editor and is read-only`}
         >
-          <span className="bg-muted text-muted-foreground flex h-7 w-7 shrink-0 items-center justify-center rounded-md">
-            <Icon className="h-4 w-4" aria-hidden />
-          </span>
-          <span
-            className={`truncate text-sm ${section.visible ? 'text-foreground' : 'text-muted-foreground line-through'}`}
-          >
-            {section.name}
-          </span>
-        </button>
-
-        {locked ? (
-          <span
-            className="text-muted-foreground shrink-0 p-1"
-            title="Managed outside the editor — read-only"
-            aria-label={`${section.name} is managed outside the editor and is read-only`}
+          <Lock className="h-4 w-4" aria-hidden />
+        </span>
+      ) : (
+        <>
+          {/* Visibility survives the design-owned lockdown: `visible` is the one
+              structural property the content model gives an editor. */}
+          <button
+            type="button"
+            onClick={() => onToggleVisibility(section.id)}
+            disabled={!canEdit}
+            aria-pressed={!section.visible}
+            aria-label={section.visible ? `Hide ${section.name}` : `Show ${section.name}`}
+            className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
           >
-            <Lock className="h-4 w-4" aria-hidden />
-          </span>
-        ) : (
-          <>
-            <button
-              type="button"
-              onClick={() => onToggleVisibility(section.id)}
-              disabled={!canEdit}
-              aria-pressed={!section.visible}
-              aria-label={section.visible ? `Hide ${section.name}` : `Show ${section.name}`}
-              className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
-            >
-              {section.visible ? (
-                <Eye className="h-4 w-4" aria-hidden />
-              ) : (
-                <EyeOff className="h-4 w-4" aria-hidden />
-              )}
-            </button>
+            {section.visible ? (
+              <Eye className="h-4 w-4" aria-hidden />
+            ) : (
+              <EyeOff className="h-4 w-4" aria-hidden />
+            )}
+          </button>
 
+          {structural && (
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild>
                 <button
@@ -243,21 +330,75 @@ function SortableSectionItem({
                 <DropdownMenu.Content
                   align="end"
                   sideOffset={4}
-                  className="border-border bg-popover z-[70] min-w-44 rounded-lg border p-1 shadow-md"
+                  className="border-border bg-popover z-70 min-w-44 rounded-lg border p-1 shadow-md"
                 >
-                  <MenuItem onSelect={() => onDuplicate(section.id)} icon={Copy}>
+                  <MenuItem onSelect={() => onDuplicate?.(section.id)} icon={Copy}>
                     Duplicate
                   </MenuItem>
                   <DropdownMenu.Separator className="bg-border my-1 h-px" />
-                  <MenuItem onSelect={() => onRequestDelete(section.id)} icon={Trash2} destructive>
+                  <MenuItem
+                    onSelect={() => onRequestDelete?.(section.id)}
+                    icon={Trash2}
+                    destructive
+                  >
                     Delete
                   </MenuItem>
                 </DropdownMenu.Content>
               </DropdownMenu.Portal>
             </DropdownMenu.Root>
-          </>
-        )}
-      </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+function SortableSectionItem({
+  section,
+  selected,
+  canEdit,
+  onSelect,
+  onToggleVisibility,
+  onDuplicate,
+  onRequestDelete,
+}: Omit<RowProps, 'structural' | 'dragHandle' | 'dragging'>) {
+  const locked = section.unmanaged === true
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: section.id,
+    disabled: !canEdit || locked,
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : undefined,
+  }
+
+  return (
+    <li ref={setNodeRef} style={style}>
+      <SectionRow
+        section={section}
+        selected={selected}
+        canEdit={canEdit}
+        structural
+        onSelect={onSelect}
+        onToggleVisibility={onToggleVisibility}
+        onDuplicate={onDuplicate}
+        onRequestDelete={onRequestDelete}
+        dragging={isDragging}
+        dragHandle={
+          <button
+            type="button"
+            className="text-muted-foreground hover:text-foreground shrink-0 cursor-grab touch-none disabled:cursor-not-allowed disabled:opacity-40"
+            aria-label={`Drag to reorder ${section.name}`}
+            disabled={!canEdit || locked}
+            {...attributes}
+            {...listeners}
+          >
+            <GripVertical className="h-4 w-4" aria-hidden />
+          </button>
+        }
+      />
     </li>
   )
 }

package/src/views/page-editor/SitePreviewFrame.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Loader2 } from 'lucide-react'
+import { injectPreviewEditChrome } from '../../lib/canvas-edit-chrome.js'
 import {
   canvasOriginFromSrc,
   isPreviewBridgeMessage,
@@ -145,6 +146,8 @@ export function SitePreviewFrame({
       editing: true,
     }
     win.postMessage(msg, canvasOrigin)
+    // Same-origin only — cross-origin previews skip silently.
+    injectPreviewEditChrome(iframeRef.current)
   }, [canvasOrigin, loaded, canvasReady, reloadKey])
 
   // Admin → canvas: highlight the selected section.

package/src/views/page-editor/reflow-context.ts

@@ -0,0 +1,43 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+import type { BreakpointId } from '../../lib/breakpoints.js'
+import type { ReflowBaseline } from '../../lib/reflow-baseline.js'
+
+/**
+ * What the reflow guard needs that a field editor cannot know by itself.
+ *
+ * A context rather than props because the guard hangs off individual fields
+ * several levels down (inspector → field → repeater row → field), and threading
+ * five props through every renderer for a feature that only some field types
+ * use makes every one of them harder to read.
+ *
+ * The default is inert — no canvas, no baseline — so a field rendered outside a
+ * page editor (a repeater in a modal, a test) simply shows no guard rather than
+ * needing a provider to exist.
+ */
+export interface ReflowContextValue {
+  /** The live `.prenta-canvas` element the probe clones. */
+  canvas: HTMLElement | null
+  /** Section the inspector is editing — scopes field lookup. */
+  sectionId: string | null
+  baseline: ReflowBaseline | null
+  /** Breakpoint the canvas is showing. */
+  device: BreakpointId
+  /** Take the canvas to a breakpoint so the editor can look at it. */
+  onProof: (id: BreakpointId) => void
+}
+
+const INERT: ReflowContextValue = {
+  canvas: null,
+  sectionId: null,
+  baseline: null,
+  device: 'wide',
+  onProof: () => {},
+}
+
+export const ReflowContext = createContext<ReflowContextValue>(INERT)
+
+export function useReflowContext(): ReflowContextValue {
+  return useContext(ReflowContext)
+}

package/src/views/page-editor/sections/ByTheNumbersSection.tsx

@@ -16,13 +16,14 @@ export function ByTheNumbersSection({ section }: { section: PageSection }) {
   return (
     <div className="mx-auto max-w-5xl px-6 text-center">
       {heading && (
-        <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
+        <h2 className="text-foreground @pv-md:text-3xl @pv-2xl:text-4xl text-2xl font-semibold tracking-tight">
           {heading}
         </h2>
       )}
       {body && <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-base">{body}</p>}
+      {/* Handoff: stats collapse to 2-up below 900, and to 1-up below 460. */}
       {stats.length > 0 && (
-        <dl className="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-3">
+        <dl className="@pv-sm:grid-cols-2 @pv-lg:grid-cols-3 mt-10 grid grid-cols-1 gap-8">
           {stats.map((s, i) => (
             <div key={i}>
               <dt className="text-brand text-4xl font-semibold tracking-tight">

package/src/views/page-editor/sections/CtaBannerSection.tsx

@@ -9,7 +9,9 @@ export function CtaBannerSection({ section }: { section: PageSection }) {
 
   return (
     <div className="mx-auto max-w-3xl px-6 text-center">
-      <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">{heading}</h2>
+      <h2 className="@pv-md:text-3xl @pv-2xl:text-4xl text-2xl font-semibold tracking-tight">
+        {heading}
+      </h2>
       {body && (
         <p
           className={`mx-auto mt-3 max-w-xl text-base ${dark ? 'text-brand-foreground/80' : 'text-muted-foreground'}`}

package/src/views/page-editor/sections/FeatureHighlightSection.tsx

@@ -18,7 +18,7 @@ export function FeatureHighlightSection({ section }: { section: PageSection }) {
           {label}
         </span>
       )}
-      <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
+      <h2 className="text-foreground @pv-md:text-3xl @pv-2xl:text-4xl text-2xl font-semibold tracking-tight">
         {heading}
       </h2>
       {body && <p className="text-muted-foreground mt-4 text-base leading-relaxed">{body}</p>}
@@ -47,7 +47,8 @@ export function FeatureHighlightSection({ section }: { section: PageSection }) {
 
   return (
     <div className="mx-auto max-w-5xl px-6">
-      <div className="flex flex-col items-center gap-10 md:flex-row">
+      {/* Handoff: image+text stacks below 700. */}
+      <div className="@pv-md:flex-row flex flex-col items-center gap-10">
         {imageLeft ? (
           <>
             {media}

package/src/views/page-editor/sections/GallerySection.tsx

@@ -15,12 +15,16 @@ export function GallerySection({ section }: { section: PageSection }) {
   const images: GalleryImage[] = Array.isArray(c.images) ? (c.images as GalleryImage[]) : []
   const withUrl = images.filter((img) => img && typeof img.url === 'string' && img.url)
 
+  // Ascending min-width container queries only: the column count is chosen
+  // from content, so mixing min- and max-width variants here would depend on
+  // Tailwind's variant sort order to resolve — the exact ambiguity the handoff
+  // warns about for data-driven grids.
   const cols =
     columns === 2
-      ? 'sm:grid-cols-2'
+      ? '@pv-sm:grid-cols-2'
       : columns === 4
-        ? 'sm:grid-cols-2 lg:grid-cols-4'
-        : 'sm:grid-cols-3'
+        ? '@pv-sm:grid-cols-2 @pv-xl:grid-cols-4'
+        : '@pv-sm:grid-cols-2 @pv-lg:grid-cols-3'
 
   return (
     <div className="mx-auto max-w-5xl px-6">

package/src/views/page-editor/sections/HeroBannerSection.tsx

@@ -17,12 +17,12 @@ export function HeroBannerSection({ section }: { section: PageSection }) {
           {eyebrow}
         </p>
       )}
-      <h1 className="text-3xl leading-tight font-semibold tracking-tight sm:text-5xl">
+      <h1 className="@pv-md:text-5xl @pv-2xl:text-6xl text-3xl leading-tight font-semibold tracking-tight">
         {heading || 'Your headline goes here'}
       </h1>
       {body && (
         <p
-          className={`mx-auto mt-5 max-w-2xl text-base sm:text-lg ${dark ? 'text-brand-foreground/80' : 'text-muted-foreground'}`}
+          className={`@pv-md:text-lg mx-auto mt-5 max-w-2xl text-base ${dark ? 'text-brand-foreground/80' : 'text-muted-foreground'}`}
         >
           {body}
         </p>

package/src/views/page-editor/sections/MissionSection.tsx

@@ -12,12 +12,14 @@ export function MissionSection({ section }: { section: PageSection }) {
   return (
     <div className={`max-w-3xl px-6 ${align}`}>
       {heading && (
-        <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
+        <h2 className="text-foreground @pv-md:text-3xl @pv-2xl:text-4xl text-2xl font-semibold tracking-tight">
           {heading}
         </h2>
       )}
       {body && (
-        <p className="text-muted-foreground mt-4 text-base leading-relaxed sm:text-lg">{body}</p>
+        <p className="text-muted-foreground @pv-md:text-lg mt-4 text-base leading-relaxed">
+          {body}
+        </p>
       )}
     </div>
   )

package/src/views/page-editor/sections/PullQuoteSection.tsx

@@ -13,7 +13,9 @@ export function PullQuoteSection({ section }: { section: PageSection }) {
   return (
     <figure className="mx-auto max-w-3xl px-6">
       <blockquote className="border-brand border-l-4 pl-6">
-        <p className="text-foreground text-xl leading-relaxed font-medium sm:text-2xl">“{quote}”</p>
+        <p className="text-foreground @pv-md:text-2xl text-xl leading-relaxed font-medium">
+          “{quote}”
+        </p>
       </blockquote>
       {(attribution || role) && (
         <figcaption className="text-muted-foreground mt-3 pl-6 text-sm">