카드 그리드

<div class="stage" id="stage">
  <div class="cards">
    <div class="card"><i class="ic"></i><b class="t"></b><i class="ln"></i></div>
    <div class="card"><i class="ic"></i><b class="t"></b><i class="ln"></i></div>
    <div class="card"><i class="ic"></i><b class="t"></b><i class="ln"></i></div>
    <div class="card"><i class="ic"></i><b class="t"></b><i class="ln"></i></div>
  </div>
</div>

.stage{width:40%;min-width:210px;max-width:92%;border:2px dashed var(--muted);border-radius:10px;padding:10px;
  transition:width 2.8s cubic-bezier(.4,0,.2,1);box-sizing:border-box}
.stage.wide{width:92%}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8%;display:flex;
  flex-direction:column;gap:8px;align-items:flex-start}
.ic{width:26%;aspect-ratio:1;border-radius:6px;background:var(--accent)}
.t{display:block;width:70%;height:7px;border-radius:3px;background:var(--fg);opacity:.7}
.ln{display:block;width:85%;height:6px;border-radius:3px;background:var(--line)}

const stage = document.getElementById('stage');
setInterval(() => stage.classList.toggle('wide'), 2400);