여백

<div class="pair">
  <div class="panel tight">
    <b class="lbl">Cramped</b>
    <div class="card"><i class="ln l1"></i><i class="ln l2"></i><i class="ln l3"></i></div>
    <div class="card"><i class="ln l1"></i><i class="ln l2"></i></div>
  </div>
  <div class="panel roomy">
    <b class="lbl">Spacious</b>
    <div class="card"><i class="ln l1"></i><i class="ln l2"></i><i class="ln l3"></i></div>
    <div class="card"><i class="ln l1"></i><i class="ln l2"></i></div>
  </div>
</div>

.pair{display:flex;gap:4%;width:min(94%,560px);height:min(88%,260px)}
.panel{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;position:relative}
.lbl{position:absolute;top:6px;left:8px;font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.tight{padding:8px;gap:4px}
.roomy{padding:8px;gap:4px;transition:padding .9s ease,gap .9s ease}
.tight .card{padding:6px;gap:3px;margin-top:16px}
.roomy .card{padding:10%;gap:8%;margin-top:16px;transition:padding .9s ease,gap .9s ease}
.card{display:flex;flex-direction:column;border-radius:6px;background:var(--bg);border:1px solid var(--line)}
.card+.card{margin-top:6px}
.ln{display:block;height:6px;border-radius:3px;background:var(--line)}
.l1{width:82%}.l2{width:64%}.l3{width:46%}

const roomy = document.querySelector('.roomy');
let big = true;
setInterval(() => {
  big = !big;
  roomy.style.padding = big ? '16px' : '8px';
  roomy.querySelectorAll('.card').forEach((c) => { c.style.padding = big ? '16px' : '6px'; c.style.gap = big ? '10px' : '4px'; });
}, 1600);