/* A front-facing handset with a 16:9 screen; the original UI remains uncropped. */
.phone-panel .town-phone{position:relative;box-sizing:border-box;width:min(100%,258px);max-width:258px;padding:43px 10px 47px;border:2px solid #87888a;border-radius:36px;background:linear-gradient(105deg,#303133,#111214 24%,#17181a 78%,#343537);overflow:visible;box-shadow:inset 0 0 0 2px #070809,inset 0 0 0 3px #424346,0 18px 28px -12px #0005,0 3px 5px #0002}
.town-phone img{display:block;width:100%;height:auto;border-radius:3px;outline:1px solid #050505}
.town-phone-speaker{position:absolute;top:21px;left:50%;transform:translateX(-50%);width:39px;height:5px;border-radius:4px;background:#050506;box-shadow:0 1px 0 #454548}
.town-phone-camera{position:absolute;top:19px;left:calc(50% - 43px);width:8px;height:8px;border:2px solid #08090a;border-radius:50%;background:radial-gradient(circle at 40% 35%,#354454,#0c1420 60%);box-shadow:0 0 0 1px #38393b}
.town-phone-home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:30px;height:30px;border:2px solid #505154;border-radius:50%;background:#151618;box-shadow:inset 0 1px 3px #000,0 1px 0 #080808}
.town-phone:before{content:"";position:absolute;left:-4px;top:83px;width:3px;height:52px;border-radius:2px 0 0 2px;background:linear-gradient(#858689,#333436,#76777a)}
.town-phone:after{content:"";position:absolute;right:-4px;top:91px;width:3px;height:33px;border-radius:0 2px 2px 0;background:linear-gradient(#858689,#333436,#76777a)}

/* Match the adjacent road image without cropping or stretching the handset. */
.town-media-pair .phone-panel{height:520px;box-sizing:border-box}
.town-media-pair .town-phone{width:200px;flex-shrink:0}
@media(min-width:561px) and (max-width:800px){.town-media-pair .phone-panel{height:400px}.town-media-pair .town-phone{width:145px}}
@media(max-width:560px){.town-media-pair .phone-panel{height:auto;padding:28px}.town-media-pair .town-phone{width:190px}}