브로큰 그리드

<div class="stage">
  <div class="ghost"></div>
  <div class="card c1"><i class="ln"></i><i class="ln s"></i></div>
  <div class="img"></div>
  <div class="card c2"><i class="ln"></i></div>
</div>

.stage{position:relative;width:min(90%,420px);height:min(88%,260px)}
.ghost{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:100%;gap:8px;opacity:.5}
.ghost::before,.ghost::after{content:'';border-left:1px dashed var(--line);height:100%}
.ghost::before{grid-column:2/2}
.ghost::after{grid-column:3/3}
.card{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:8%;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 16px rgba(0,0,0,.1);
  transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.c1{left:4%;top:8%;width:30%;height:34%}
.c2{left:44%;bottom:6%;width:26%;height:26%;z-index:2}
.img{position:absolute;right:6%;top:20%;width:36%;height:52%;border-radius:10px;z-index:1;
  background:linear-gradient(160deg,var(--accent-2),var(--accent));
  box-shadow:0 10px 26px rgba(0,0,0,.18);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.ln{display:block;height:6px;border-radius:3px;background:var(--line)}
.ln.s{width:60%}
.stage.tilt .img{transform:rotate(-4deg) translate(-4%,2%)}
.stage.tilt .c2{transform:translate(10%,-8%)}
.stage.tilt .c1{transform:rotate(1.5deg)}

document.querySelector('.stage').classList.add('x');
setInterval(() => document.querySelector('.stage').classList.toggle('tilt'), 1700);