Wagtail Animal Clinic — Playful Veterinary The Clinic Page for Divi 5

The Wagtail Clinic page opens with an asymmetric two-column hero: a 16/24 text column on the left and an 8/24 portrait-ratio (4:5) image column on the right, built entirely with native Divi section, row, and column modules. The h1 sits at 64px Fredoka Bold on desktop and steps down responsively to 46px on tablet and 36px on phone, keeping the headline legible without manual breakpoint overrides. Below the headline, two CTAs share a single flex row group: a fully-rounded pill button in bubblegum pink (#ff7aa5) with a 6px hard-offset box shadow (no blur, preset4), and a plain text link as a lower-commitment secondary path. The warm cream background (#fff7ec) runs through the majority of the page and functions as a neutral warmth anchor, allowing the navy (#2b2457), soft purple (#625a8c), and pink accents to do all the personality work without the layout ever feeling busy.

The second section inverts the tone with a full-bleed photo background overlaid by a flat navy gradient (rgba 43,36,87 at 68% on both stops), creating a dark storytelling band inside the same cream-dominant page. Over this, a four-column milestone grid tracks the clinic's growth from 2018 to 2025. Each milestone card leads with a 48px Fredoka year figure, a 3px solid white top-border acting as a visual rule, an h3 milestone heading, and a two-line description. The grid collapses to two columns on tablet and a single column on phone via the group module's responsive grid-column-count setting, requiring zero manual stacking.

Section three is a three-column editorial photo gallery. Each column stacks two images at alternating 4:5 and 4:3 aspect ratios, creating the height variation that makes the grid read as curated rather than mechanical. All six images use object-fit cover, so dropping in your own pet photography never breaks the proportions. The gallery header uses a classic editorial split: a 14/24 left column carries the h2 in 44px Fredoka, while a 10/24 right column holds a short caption, with the row aligned to flex-end so both columns meet at the same baseline.

The page closes with a centered pull-quote section featuring a 160px Fredoka opening-quote character, a 44px testimonial body, and a circular 56px avatar with client attribution, all sitting on the cream background. A final CTA band in solid pink (#ff7aa5) uses a horizontal flex group to place the h2 heading on the left and the booking button on the right on desktop, collapsing to a vertical stack on phone. The white pill button in the CTA band mirrors the same 6px hard-offset shadow and 999px border-radius used in the hero, giving the page a coherent visual grammar from top to bottom.