/* Shared mockup chrome: the phone frame, the iOS status bar and home indicator, and the "photos". */
* { box-sizing: border-box; }
.photo { display: block; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.photo::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: .9; }
/* Film-like scenes standing in for their photos. */
.p-sea { background-image: radial-gradient(40% 22% at 52% 60%, #ffe2b3 0%, #f6b48a 35%, transparent 70%), linear-gradient(180deg, #5b6d8c 0%, #c99a95 46%, #e8b49a 52%, #607d97 54%, #33465e 100%); }
.p-books { background-image: radial-gradient(50% 60% at 75% 20%, #ffe7b8cc, transparent 70%), repeating-linear-gradient(90deg, #6e4636 0 34px, #a36a45 34px 60px, #3f5a4e 60px 92px, #c8a067 92px 116px, #59394a 116px 152px, #8c7a5c 152px 178px); background-color: #2a2320; }
.p-city { background-image: radial-gradient(5px 5px at 22% 48%, #ffe6a3, transparent), radial-gradient(7px 7px at 58% 56%, #ffd27a, transparent), radial-gradient(4px 4px at 80% 40%, #fff0c4, transparent), radial-gradient(60% 40% at 50% 100%, #e7a86c, transparent), linear-gradient(180deg, #121c2e 0%, #24365a 60%, #b77b55 100%); }
.p-leaves { background-image: radial-gradient(30% 30% at 30% 40%, #f2b552, transparent 70%), radial-gradient(35% 30% at 70% 62%, #d9772e, transparent 70%), radial-gradient(25% 25% at 55% 22%, #f6d27a, transparent 70%), linear-gradient(160deg, #6d4a2b, #2f2a1f); }
.p-coffee { background-image: radial-gradient(26% 26% at 48% 52%, #3a2418 0 40%, #c99b6d 41% 47%, #f3e3cc 48% 62%, transparent 63%), radial-gradient(80% 80% at 30% 20%, #f6efe4, #d8c3a5); }
.p-window { background-image: linear-gradient(90deg, transparent 48%, #3b3530 48% 52%, transparent 52%), linear-gradient(0deg, transparent 48%, #3b3530 48% 52%, transparent 52%), radial-gradient(70% 70% at 50% 40%, #fdf3df, #e2c9a2 60%, #8e7558); }
.p-noodles { background-image: radial-gradient(36% 30% at 50% 55%, #f5d9a4 0 30%, #e9b46f 31% 55%, #fff 56% 62%, transparent 63%), radial-gradient(90% 90% at 50% 50%, #7a4b32, #3a2318); }
.p-snow { background-image: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 60% 20%, #fff, transparent), radial-gradient(3px 3px at 80% 60%, #fff, transparent), radial-gradient(2px 2px at 35% 70%, #fff, transparent), linear-gradient(180deg, #9fb3c8, #e9eef3 70%, #ffffff); }
.p-portrait-a { background-image: radial-gradient(38% 34% at 50% 44%, #f1c9ad 0 60%, transparent 62%), radial-gradient(60% 40% at 50% 92%, #3b4a5e 0 60%, transparent 62%), radial-gradient(46% 44% at 50% 36%, #2b2220 0 62%, transparent 64%), linear-gradient(160deg, #e9dccb, #c9b59b); }
.p-portrait-b { background-image: radial-gradient(36% 32% at 50% 46%, #e2b393 0 60%, transparent 62%), radial-gradient(62% 40% at 50% 94%, #8a5a3c 0 60%, transparent 62%), radial-gradient(40% 30% at 50% 30%, #1f1a18 0 60%, transparent 62%), linear-gradient(200deg, #c7d3d6, #8fa3a8); }