8pt 그리드

<div class="stage">
  <div class="dots show" id="dots"></div>
  <div class="card">
    <div class="ic"></div>
    <i class="ln l1"></i><i class="ln l2"></i>
    <div class="btn"></div>
  </div>
</div>

.stage{position:relative;width:min(90%,320px);aspect-ratio:16/11;display:grid;place-items:center}
.dots{position:absolute;inset:0;border-radius:12px;opacity:.28;transition:opacity .5s;
  background-image:radial-gradient(circle,var(--line) 1px,transparent 1.4px);
  background-size:8% 8%}
.dots.show{opacity:1}
.card{position:relative;width:76%;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);padding:8%;display:grid;gap:8%;justify-items:start}
.ic{width:24%;aspect-ratio:1;border-radius:8px;background:var(--accent)}
.ln{display:block;height:8%;border-radius:3px;background:var(--line)}
.l1{width:80%}.l2{width:56%}
.btn{width:40%;height:14%;border-radius:8px;background:var(--accent-3);margin-top:2%}

const dots = document.getElementById('dots');
setInterval(() => dots.classList.toggle('show'), 1400);