/* Global grid styling for image upload previews */

/* FilePond as grid */
.filepond--root .filepond--list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filepond--item {
  width: calc(25% - 8px);
  min-width: 120px;
}

@media (max-width: 1200px) {
  .filepond--item { width: calc(33.333% - 8px); }
}

@media (max-width: 768px) {
  .filepond--item { width: calc(50% - 8px); }
}

@media (max-width: 480px) {
  .filepond--item { width: 100%; }
}

/* Ensure FilePond item panel acts nicely in grid */
.filepond--panel-root { overflow: hidden; }

/* Dropify custom multi preview grid (when our JS appends .preview-container) */
.dropify-wrapper .preview-container .multi-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.dropify-wrapper .preview-container .preview-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}