I’m struggling with hero images that look perfect at 1440 but lose the subject and headline at 375 — how do you art-direct for responsive without designing three separate assets? I’m in Figma on a 12-column grid and leaning on object-position in CSS; do you define safe zones for type or pick alternate crops per breakpoint?
I’d set a persistent ‘safe zone’ for type (say the middle 40–60% of your grid) in the hero component, then mark a single focal point in Figma and feed its x/y into CSS object-position via custom properties per breakpoint. That lets you shift the crop without making new assets, and clamp the headline (clamp(28px, 4vw, 48px)) so it stays inside the band — like bowling with bumpers. If you’re on background-image, the same works with background-position; feels unnecessary if the focal point handles it.
Try a responsive overlay that strengthens on small screens — linear-gradient vignette or a subtle backdrop-filter blur under the headline — so the type stays readable while you keep a single image. @william85’s point is solid; just watch contrast at 1440 so the overlay doesn’t muddy the art — would a light vignette fit your brand?
, this drives me nuts too. At 375 I stop fighting the crop and switch the hero to a stacked layout: headline gets its own row and the image sits below with a fixed 4:5 aspect-ratio, toggled via container queries (CSS container queries - CSS | MDN); in Figma I keep your 12‑column but show the stacked variant as a component state. Does a stacked variant fit your system, or do you have to keep text over image?
Quick win: run the same image through smart-crop on your CDN (e.g., Cloudinary’s “gravity: auto” — Image Transformations for Developers | Documentation) with a srcset so it keeps the subject centered as widths shrink, no extra assets. I still clamp() the headline size/padding to keep 2–3 lines at 375, and leave a manual override for weird shots — like two people hugging a dog. Does that fit your pipeline, or are you serving straight Figma exports?