Draw the hero phone's bezel at the phone's own scale

A percentage padding is of the containing block's width, and the hero
phone is positioned absolutely in the hero visual at a quarter of its
width, so its 3.4% bezel came out four times too thick. The bezel is now
the screen's margin, a percentage of the phone's own width wherever the
phone sits; the gallery phones look as before.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

website/css/device-frame.css

@@ -113,14 +113,17 @@
 
 /* ---------------------------------------------------------------- phone */
 
+/* The bezel is the screen's margin, not the phone's padding: a percentage margin is of the phone's
+   own width, where a padding would be of whatever the phone is positioned in (the hero). */
 .device--phone {
-    padding: 3.4%;
+    display: flow-root;
     border-radius: 15% / 7%;
     background: var(--bezel);
     box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 24px 48px -20px var(--device-shadow);
 }
 
 .device--phone .device__screen {
+    margin: 3.4%;
     aspect-ratio: 393 / 852;
     border-radius: 12.5% / 5.8%;
 }