/* ============================================================
 * File: css/tools/image.css
 * Module: Tool CSS — Image Compressor
 * Purpose: Side-by-side previews.
 * ============================================================ */

.dt-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  .dt-img-grid { grid-template-columns: 1fr; }
}
.dt-img-preview {
  display: block;
  max-width: 100%;
  max-height: 300px;
  margin-bottom: 8px;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background:
    repeating-conic-gradient(var(--color-surface-2) 0% 25%, transparent 0% 50%)
    0 0 / 16px 16px;
}
.dt-img-preview:not([src]) { display: none; }