/* Thumbnail Atom - Layer 3 (Panel color) */
.thumbnail {
  display: inline-block;
  overflow: hidden;
  background-color: var(--bg-panel);        /* Panel layer for placeholders */
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbnail-sm { width: var(--space-12); height: var(--space-12); }
.thumbnail-md { width: var(--space-16); height: var(--space-16); }
.thumbnail-lg { width: var(--space-24); height: var(--space-24); }
.thumbnail-xl { width: var(--space-32); height: var(--space-32); }

.thumbnail-square { border-radius: var(--border-radius-md); }
.thumbnail-rounded { border-radius: var(--border-radius-lg); }
.thumbnail-circle { border-radius: var(--border-radius-full); }

.thumbnail-clickable {
  cursor: pointer;
  transition: all var(--duration-200) var(--easing-out);
}

.thumbnail-clickable:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}