Description

This PR refactors the mockup-phone component to be responsive and consistent across viewports and browsers.
It removes hard-coded pixel dimensions and invalid grid definitions, replacing them with scalable, ratio-based sizing while preserving the original phone silhouette, notch, and display styling.
fixed #1063

Changes

Wrapper (.mockup-phone)

• Added aspect-ratio: 390 / 845 for natural scaling without fixed width/height.
• Children unified via grid-area: 1 / 1 for reliable overlay stacking.

Camera notch (.mockup-phone-camera)

• Converted fixed px sizing (126×32px) to proportional values (32.3% × 3.8%).
• Simplified with border-radius: 9999px to always render a pill shape.

Display (.mockup-phone-display)

• Removed fixed 390×845px; now width: 100%; height: 100% with responsive scaling.
• Retains rounded corners (border-radius: 49px) for visual integrity.

Image handling

• Ensures child fills container with object-fit: cover.

Motivation

• Responsive integrity: Prevent layout breakage on small viewports (<390px).
• Cross-browser correctness: Fixes invalid grid-column: 1/1 definitions that caused inconsistent rendering in Safari vs Chrome.
• Design fidelity: Maintains the intended rounded display and notch regardless of scaling.
• Minimal risk: Pure CSS update; no markup or API changes required.

Screenshots

iphone SE

ASIS	TOBE