.vsdp-preview-card{
  display:grid;
  gap:20px;
  padding:20px;
  border:1px solid #d9dee5;
  border-radius:16px;
  background:#fff;
}

.vsdp-preview-meta{
  display:grid;
  gap:8px;
}

.vsdp-preview-line{
  font-size:14px;
  line-height:1.45;
}

.vsdp-preview-stage{
  padding:18px;
  border:1px solid #e3e7ed;
  border-radius:14px;
  background:#f7f9fc;
  overflow:hidden;
}

.vsdp-preview-grid{
  display:grid;
  gap:12px;
  justify-content:start;
  align-content:start;
}

.vsdp-preview-cell{
  position:relative;
  width:88px;
  aspect-ratio:35 / 45;
  border:1px solid #cfd6df;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  overflow:hidden;

  /* hides the dev numbers without changing JS */
  color:transparent;
  font-size:0;
  line-height:0;
}

.vsdp-preview-cell::before{
  content:"";
  position:absolute;
  top:16%;
  left:50%;
  width:28%;
  aspect-ratio:1 / 1;
  transform:translateX(-50%);
  border-radius:999px;
  background:#d7dde6;
}

.vsdp-preview-cell::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:14%;
  width:58%;
  height:40%;
  transform:translateX(-50%);
  border-radius:999px 999px 14px 14px;
  background:#d7dde6;
}

@media (min-width:768px){
  .vsdp-preview-card{
    grid-template-columns:minmax(220px,280px) 1fr;
    align-items:start;
  }

  .vsdp-preview-stage{
    min-height:220px;
  }
}