.project-art{--art-tint:#647c82;isolation:isolate;background:color-mix(in srgb, var(--art-tint) 22%, var(--paper));position:relative;overflow:hidden}.project-art:before{content:"";aspect-ratio:1;border:1px solid color-mix(in srgb, var(--art-tint) 24%, transparent);border-radius:50%;width:90%;position:absolute;inset:18% auto auto -20%}.project-art-screen{border-radius:5px;position:absolute;overflow:hidden;box-shadow:0 14px 28px -12px #0005}.project-art-lead{z-index:1}.project-art-companion{box-shadow:0 14px 28px -12px #0004}.project-art-phone{aspect-ratio:9/19.7}.project-art-desktop{aspect-ratio:16/10;border-radius:4px}.project-art[data-layout=phone] .project-art-lead{inset:7% auto 7% 50%;transform:translate(-50%)}.project-art[data-layout=phones] .project-art-lead{inset:7% auto 7% 65%;transform:translate(-50%)rotate(4deg)}.project-art[data-layout=phones] .project-art-companion{inset:18% auto -9% 10%;transform:rotate(-5deg)}.project-art[data-layout=desktop] .project-art-lead{width:80%;top:50%;left:10%;transform:translateY(-50%)}.project-art[data-layout=desktop-phone] .project-art-desktop{z-index:0;width:72%;top:47%;left:6%;transform:translateY(-50%)rotate(-3deg)}.project-art[data-layout=desktop-phone] .project-art-phone{z-index:1;inset:14% auto 4% 78%;transform:translate(-50%)rotate(4deg)}.project-art[data-layout=desktop-pair] .project-art-companion{width:62%;top:40%;left:40%;transform:translate(-50%,-50%)rotate(-4deg)}.project-art[data-layout=desktop-pair] .project-art-lead{width:66%;top:60%;left:58%;transform:translate(-50%,-50%)rotate(3deg)}.project-art[data-layout=fill] .project-art-lead{aspect-ratio:auto;box-shadow:none;border-radius:0;inset:0}@media (hover:hover) and (prefers-reduced-motion:no-preference){.project-art-screen{transition:translate .35s}a:hover .project-art:not([data-layout=fill]) .project-art-lead{translate:0 -5px}a:hover .project-art .project-art-companion{translate:0 5px}}