.project{--spacing: calc(var(--d-margin) * 2);--iframe-top: calc((var(--spacing) * 2) + 1.6em + 1cap);--iframe-left: var(--spacing);--iframe-width: calc(100% - (var(--spacing) * 2));--iframe-height: calc(100% - (var(--spacing) * 3) - 1.6em - 1cap);width:100%;height:100%;position:fixed;left:0;top:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(10px) grayscale(100%);backdrop-filter:blur(10px) grayscale(100%);transition:opacity 200ms;opacity:0;pointer-events:none}.project.open{opacity:1;pointer-events:all}.project iframe{width:var(--iframe-width);height:var(--iframe-height);position:fixed;left:var(--iframe-left);top:var(--iframe-top);border:0;border-radius:.6em;box-shadow:0 0 30px rgba(255,255,255,.2);z-index:2;transition:opacity 200ms 200ms;opacity:0}.project.open iframe{opacity:1}.project::after{content:"";width:calc(var(--iframe-width) - 2px);height:calc(var(--iframe-height) - 2px);position:fixed;left:calc(var(--iframe-left) + 1px);top:calc(var(--iframe-top) + 1px);border-radius:.6em;background:#fff;z-index:1;transform:scale(0.95);transition:transform 200ms}.project.open::after{transform:none}.project .text{color:#fff;position:absolute;left:var(--spacing);top:var(--spacing);right:var(--spacing);display:flex;justify-content:flex-end}