.device-showcase{padding:50px 35px 25px;background:#f7f7f7;border-radius:5px;color:#242424;container-type:inline-size}
.device-assembly{display:grid;grid-template-columns:minmax(0,1fr) 22%;gap:4.5%;align-items:end;max-width:1100px;margin:auto}
.device-assembly figure{margin:0;min-width:0}.device-assembly figcaption{font-family:Arial,sans-serif;font-size:8px;letter-spacing:1px;text-align:center;color:#777;margin-top:16px}
.monitor-shell{position:relative;border-radius:12px 12px 7px 7px;padding:14px 12px 0;background:linear-gradient(135deg,#343434,#151515);box-shadow:0 15px 25px #00000012;border:1px solid #454545}
.monitor-camera{position:absolute;top:5px;left:50%;width:4px;height:4px;background:#444;border-radius:50%}
.device-screen{position:relative;overflow:hidden;width:100%;background:#fff;aspect-ratio:16/10;isolation:isolate}
.device-screen iframe{position:absolute;inset:0;border:0;display:block;max-width:none;transform-origin:0 0;background:white;color-scheme:normal}
.monitor-chin{height:31px;margin:0 -12px;background:linear-gradient(#dfdfdf,#c3c3c3);border-radius:0 0 7px 7px;display:grid;place-items:center}.monitor-chin span{font-family:Georgia,serif;font-size:16px;letter-spacing:-1px;color:#777}
.monitor-stand{position:relative;width:18%;height:52px;margin:auto;background:linear-gradient(90deg,#bcbcbc,#e5e5e5 50%,#aaa);clip-path:polygon(22% 0,78% 0,86% 82%,100% 92%,100% 100%,0 100%,0 92%,14% 82%)}
.phone-shell{position:relative;border:1px solid #777;border-radius:32px;background:linear-gradient(135deg,#777,#262626 30%,#111 75%,#626262);padding:7px;box-shadow:0 15px 25px #00000018;margin-bottom:0}
.phone-display{overflow:hidden;border-radius:25px;background:white}.phone-status{height:25px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-family:Arial,sans-serif;font-size:8px;font-weight:bold;background:white;color:#171717}.phone-status>i{width:36%;height:13px;background:#161616;border-radius:12px}.phone-display .device-screen{aspect-ratio:390/844}.phone-home{height:13px;background:#fff;display:grid;place-items:center}.phone-home i{height:3px;width:35%;border-radius:5px;background:#222}.phone-button{position:absolute;right:-3px;top:24%;height:12%;width:2px;border-radius:2px;background:#555}
.device-showcase-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1100px;margin:30px auto 0}.device-hint{font-family:Arial,sans-serif;font-size:11px;color:#737373;display:flex;align-items:center;gap:25px}.device-hint>span{font-size:20px;color:#222}.device-view-switch{display:flex;gap:3px;background:white;border-radius:25px;padding:4px}.device-view-switch button{padding:9px 18px;border:0;border-radius:20px;font-size:10px;background:none;color:#242424}.device-view-switch button[aria-pressed=true]{background:#222;color:white}
#website-grid{grid-template-columns:1fr;gap:75px}#website-grid>.card{max-width:none}#website-grid .card-meta{margin-top:25px}#website-grid .card-meta h3{font-size:clamp(24px,3vw,38px)}#website-grid .card>p{max-width:650px}#website-grid .device-showcase{clip-path:none!important}#project-dialog:has(.device-showcase){width:min(1120px,94vw)}#project-dialog .device-showcase{margin-top:30px}.case-devices{margin:42px 0}.case-devices>p{font-size:12px;line-height:1.8;color:#666}.case-main .device-showcase{margin:25px 0 50px}.case-main:has(.device-showcase){--paper:#fff;--ink:#242424}
@container (max-width:650px){.monitor-shell{border-radius:8px 8px 4px 4px;padding:10px 8px 0}.monitor-chin{height:22px;margin:0 -8px}.monitor-chin span{font-size:12px}.monitor-stand{height:35px}.phone-shell{padding:4px;border-radius:21px}.phone-display{border-radius:17px}.phone-status{height:16px;padding:0 8px;font-size:5px}.phone-status>i{height:8px}.phone-home{height:9px}.phone-home i{height:2px}.device-assembly figcaption{font-size:6px;letter-spacing:.5px}}
@media(max-width:700px){.device-showcase{padding:25px 12px 18px}.device-assembly{gap:12px;grid-template-columns:minmax(0,1fr) 25%}.device-showcase-bottom{margin-top:20px;gap:10px;flex-wrap:wrap}.device-hint{font-size:9px;gap:12px}.device-hint>span{font-size:16px}.device-view-switch button{font-size:9px;padding:8px 14px}.monitor-shell{padding:7px 5px 0;border-radius:6px 6px 3px 3px}.monitor-chin{height:17px;margin:0 -5px}.monitor-chin span{font-size:10px}.monitor-stand{height:28px}.monitor-camera{top:2px;width:3px;height:3px}.phone-shell{padding:3px;border-radius:13px}.phone-display{border-radius:10px}.phone-status{height:12px;padding:0 5px;font-size:4px}.phone-status>i{height:6px}.phone-home{height:7px}.phone-home i{height:2px}.device-assembly figcaption{font-size:5px;margin-top:10px}#website-grid{gap:55px}.case-main .device-showcase{margin:20px 0 35px}}

.device-showcase[data-device-id="halden-pools"] .device-monitor .device-screen{aspect-ratio:1600/830}

.device-showcase-bottom{justify-content:flex-end}