.item {
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/*
 * @dnd-kit/dom promotes the dragged source element into the native Popover
 * API top layer during a drag (it sets `popover="manual"` on the element so
 * it renders above everything regardless of stacking context/overflow).
 * Browsers apply their own default UA styling to any [popover] element,
 * notably an opaque `background-color: canvas`, which paints over the
 * item's sprite `background-image` while dragging.
 *
 * dnd-kit ships its own reset for this, but wraps it in an explicit
 * `@layer dnd-kit` block. Per the CSS cascade layers spec, ANY unlayered
 * rule - including the browser's own unlayered UA popover default - beats
 * anything in an explicit author layer, regardless of specificity or
 * source order. This app also compiles Tailwind (and its own layers) into
 * named layers, so dnd-kit's layered reset loses the cascade to the
 * browser default.
 *
 * This rule is intentionally NOT wrapped in @layer, and uses !important,
 * so it always wins regardless of layer cascade order. Scoped to
 * [data-dnd-dragging] (the attribute @dnd-kit/dom puts on the promoted
 * feedback element) rather than a blanket [popover] selector, so it only
 * touches dnd-kit's own drag feedback element.
 */
[data-dnd-dragging][popover] {
  background: none !important;
  color: inherit !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}