*{box-sizing:border-box}html{background:#0b0b0d;color:#f5f5f5}body{margin:0;font-family:Arial,Helvetica,sans-serif}.wrap{max-width:1450px;margin:auto;padding:0 32px 90px}header{padding:76px 0 64px;text-align:center}h1{font-size:clamp(25px,4.2vw,56px);letter-spacing:.11em;line-height:1.1;margin:0;font-weight:800}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}.item{min-width:0}.tile{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:0;border-radius:2px;background:#22242a;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:white}.tile img{width:100%;height:100%;object-fit:cover;display:block}.tile .placeholder{font-weight:800;font-size:clamp(16px,2vw,28px);text-align:center;padding:18px;letter-spacing:.02em;max-width:95%}.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.25));pointer-events:none}.tile:hover img{transform:scale(1.025)}.tile img{transition:transform .25s}.play{position:absolute;z-index:1;background:rgba(0,0,0,.68);border:1px solid #ffffff80;border-radius:50%;height:55px;width:55px;display:grid;place-items:center;font-size:23px;opacity:0;transition:opacity .2s}.tile:hover .play,.tile:focus-visible .play{opacity:1}.meta{padding-top:12px}.name{font-size:17px;font-weight:700;line-height:1.3}.cut{font-size:13px;color:#a4a4a9;margin-top:5px}dialog{background:#101014;color:white;border:1px solid #444;width:min(1000px,94vw);max-height:90vh;padding:34px 18px 18px}dialog::backdrop{background:rgba(0,0,0,.88)}#close{position:absolute;right:8px;top:0;color:white;background:none;border:0;font-size:34px;cursor:pointer}#playerBody iframe,#playerBody video{width:100%;aspect-ratio:16/9;border:0}#playerBody p{text-align:center;padding:50px 12px;color:#bbb}@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:570px){.wrap{padding:0 18px 50px}header{padding:45px 0}.grid{grid-template-columns:1fr;gap:28px}.play{opacity:1}}
.prestige-header{padding:22px 0 38px}.prestige-header img{display:block;width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.tile::before{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.82));z-index:1;pointer-events:none}.tile-title{position:absolute;z-index:2;bottom:17px;left:17px;right:17px;text-align:left;font-size:clamp(15px,1.6vw,23px);font-weight:600;letter-spacing:.025em;line-height:1.15;text-shadow:0 1px 8px #000}.tile .play{z-index:3}.tile img{object-fit:cover}

.clean-header{padding:74px 0 55px;text-align:center;background:none}.clean-header h1{font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:clamp(24px,4vw,52px);letter-spacing:.16em;line-height:1.3}.clean-header p{font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;font-weight:300;letter-spacing:.4em;font-size:clamp(12px,1.35vw,17px);margin:10px 0 0;color:#e9e7e3}@media(max-width:570px){.clean-header{padding:46px 0 35px}.clean-header h1{letter-spacing:.095em}}

/* White-background portfolio variation */
html,body{background:#fff;color:#141414}
.clean-header p{color:#333}
.meta{padding-top:13px}
.cut{font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;font-size:17px;font-weight:700;color:#111;margin-top:0;line-height:1.3}

/* Full key-art titles are already in the supplied images. */
.tile::before,.tile:after{display:none}