/* Actual website captures, composed as a responsive editorial board. */
.project-showcase{position:relative;display:block;width:100%;height:100%;overflow:hidden;isolation:isolate}
.project-showcase .showcase-screen{position:absolute;display:block;overflow:hidden;box-shadow:0 6px 18px #0003;background:#080808}
.project-showcase .showcase-screen img{position:relative;display:block;width:100%;max-width:none;height:auto;object-fit:initial;border-radius:0}
.showcase-ourhome{background:#23313a}
.showcase-ourhome .showcase-screen-1{left:4%;top:7%;width:55%;height:45%}
.showcase-ourhome .showcase-screen-2{left:62%;top:3%;width:34%;height:44%}
.showcase-ourhome .showcase-screen-2 img{transform:translateY(-57%)}
.showcase-ourhome .showcase-screen-3{left:62%;top:51%;width:34%;height:55%}
.showcase-ourhome .showcase-screen-3 img{transform:translateY(-78%)}
.showcase-diablo{background:var(--thumbnail-bg,#c5d8df)}
.showcase-diablo .showcase-screen-1{left:4%;top:6%;width:39%;height:96%}
.showcase-diablo .showcase-screen-2{left:46%;top:-7%;width:27%;height:99%}
.showcase-diablo .showcase-screen-3{left:76%;top:10%;width:20%;height:97%}
.showcase-diablo .showcase-screen-2 img,.showcase-diablo .showcase-screen-3 img{width:266.667%;left:-84.444%}
.showcase-diablo .showcase-screen-2 img{transform:translateY(-20%)}
.showcase-diablo .showcase-screen-3 img{transform:translateY(-60%)}

.showcase-ourhome .showcase-screen-4{left:4%;top:57%;width:55%;height:36%}
.showcase-ourhome .showcase-screen-4 img{transform:translateY(-25%)}

/* Single website view uses the standard inset; excess content clips below. */
.showcase-ourhome-overview{background:var(--thumbnail-bg,#dedede)}
.showcase-ourhome-overview .showcase-screen-1{left:5%;top:8%;width:90%;height:92%;border-radius:12px 12px 0 0;box-shadow:0 3px 16px #12141626;background:#050505}

/* Presentation colors are selected per project, not per category. */
[data-thumbnail-theme="ourhome"]{--thumbnail-bg:#dedede}
[data-thumbnail-theme="hana"]{--thumbnail-bg:#deeee4}
[data-thumbnail-theme="bhc"]{--thumbnail-bg:#f0e4cb}
[data-thumbnail-theme="diablo"]{--thumbnail-bg:#c5d8df}
[data-thumbnail-theme="delkor"]{--thumbnail-bg:#e8e2ef}

/* Enlarge the existing kiosk artwork around its screens; crop the lower body. */
.archive-visual.kiosk-screen-focus>img{height:auto;object-fit:contain;transform:scale(1.4);transform-origin:center top}
.project-media>img.kiosk-screen-focus{height:auto;object-fit:contain;transform:translateY(-3%) scale(1.3);transform-origin:center top}

/* Hana: fill the card with the campaign artwork; clip the bottom website navigation. */
.archive-visual.hana-keyvisual>img,.project-media>img.hana-keyvisual{height:115%;object-fit:cover;object-position:center top}

/* BHC keeps the standard card size, fills the width and clips only the bottom. */
.archive-visual.bhc-top-view>img,.project-media>img.bhc-top-view{display:block;width:100%;height:auto;border-radius:0;box-shadow:none;object-position:center top}