.product-image-layout {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
  gap: 18px;
}
.product-image-layout > article { display: grid; align-content: start; gap: 10px; }
.product-image-layout > article > span { font-weight: 600; }
.product-display-image img,
.product-image-empty {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--gray);
  background: rgba(201, 202, 202, .16);
  object-fit: contain;
}
.product-image-empty { display: grid; place-items: center; color: var(--text-secondary); }
.product-white-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.product-white-image-grid figure { display: grid; gap: 7px; margin: 0; padding: 8px; border: 1px solid var(--gray); }
.product-white-image-grid img { width: 100%; aspect-ratio: 1; background: var(--white); object-fit: contain; }
.product-white-image-grid figcaption { overflow: hidden; color: var(--text-secondary); font-size: var(--type-caption-size); text-overflow: ellipsis; white-space: nowrap; }
.product-white-image-grid button { margin: 0; }
.product-image-upload { grid-template-columns: 1fr auto; }
.product-dialog-image-note { padding: 14px; border: 1px solid var(--gray); background: rgba(201, 202, 202, .14); }
.product-dialog-image-note h3,
.product-dialog-image-note p { margin: 0; }
.product-dialog-image-note p { margin-top: 6px; color: var(--text-secondary); }
@media (max-width: 700px) {
  .product-image-layout,
  .product-white-image-grid { grid-template-columns: 1fr; }
  .product-image-upload { grid-template-columns: 1fr; }
}