.preview-empty{display:grid;place-items:center;width:100%;height:170px;border:1px dashed #4b515a;border-radius:8px;background:#1a1d21;color:#777e88;font-size:12px}

/* 说明卡与三个素材始终在同一套网格内，避免素材向右溢出。 */
.template-preview{
  grid-template-columns:minmax(0,1fr) minmax(270px,320px);
  align-items:start;
}

.template-preview > *{min-width:0}

.preview-assets{
  display:grid;
  width:100%;
  min-width:0;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.66fr) minmax(0,.66fr);
  gap:12px;
  align-items:start;
}

.preview-assets .preview-slot{
  min-width:0;
  overflow:hidden;
}

.preview-assets .preview-slot img,
.preview-assets .preview-slot video{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100%;
  border:1px solid #3a3e45;
  border-radius:8px;
  background:#101214;
}

.preview-assets .preview-identity img{
  aspect-ratio:1 / 1;
  object-fit:cover;
}

.preview-assets .preview-portrait img,
.preview-assets .preview-portrait video{
  aspect-ratio:9 / 16;
  object-fit:cover;
}

.preview-assets figcaption{
  align-items:center;
  margin-top:10px;
  font-weight:700;
}

.preview-assets figcaption b{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:#3b2613;
  color:#ff9b31;
  font-size:10px;
}

.template-method{
  width:auto;
  min-width:0;
  box-sizing:border-box;
}

@media(max-width:900px){
  .preview-empty{height:130px}
  .template-preview{grid-template-columns:1fr}
  .template-method{grid-column:1}
  .preview-assets{grid-template-columns:minmax(0,1.18fr) minmax(0,.66fr) minmax(0,.66fr)}
}