body{background:#111;color:#999;font-family:"Inter"}main{height:100dvh;display:flex;align-items:center;justify-content:center;padding:60px}.frame{width:100%;border:1px solid #262626;padding:20px;max-width:420px;position:relative}.frame::before,.frame::after{content:"";position:absolute;pointer-events:none;z-index:0}.frame::before{inset:-50px -1px;border-inline:1px solid #262626;-webkit-mask-image:linear-gradient(to top, transparent 0, black 50px, black calc(100% - 50px), transparent 100%);mask-image:linear-gradient(to top, transparent 0, black 50px, black calc(100% - 50px), transparent 100%)}.frame::after{inset:-1px -50px;border-block:1px solid #262626;-webkit-mask-image:linear-gradient(to right, transparent 0, black 50px, black calc(100% - 50px), transparent 100%);mask-image:linear-gradient(to right, transparent 0, black 50px, black calc(100% - 50px), transparent 100%)}.frame [data-tilt]{border:1px solid hsla(0,0%,100%,.2);aspect-ratio:420/640;margin:auto;max-width:420px;background:#242424;border-radius:12px;position:relative;z-index:100;will-change:transform;transform:perspective(1000px);transform-style:preserve-3d}.frame [data-tilt] figure{margin:0;padding:0;position:absolute;inset:0;line-height:0;display:flex;align-items:flex-end;justify-content:center;z-index:0}.frame [data-tilt] figure img{width:100%;height:auto;border-radius:12px}.frame [data-tilt] .content{transform:translateZ(20px);position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;scale:.9;text-shadow:0 0px 25px rgba(0,0,0,.75)}.frame [data-tilt] .content h1{color:#fff;font-weight:600;margin:0}.frame [data-tilt] .content .ph{position:absolute;top:80px;right:30px;color:#fff;text-decoration:none;font-family:"Sometype Mono";transform:rotate(90deg);transform-origin:bottom right}.frame [data-tilt] .js-tilt-glare{border-radius:12px}