.transform-outer {
  position: fixed;
  inset: 0;
  transform: scale(0.85) rotate(-2deg);
  transform-origin: center center;
  overflow: hidden;
}

.transform-inner {
  position: absolute;
  inset: 0;
  transform: skew(-3deg, -3deg);
  overflow-y: auto;
}

.scroll-content {
  position: relative;
  min-height: 250%;
  padding: 20px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 20px;
}

.card.draggable {
  position: relative;
  flex-shrink: 0;
  transform: scale(1.1) rotate(3deg);
  transform-origin: 50% 50%;

  &.dragging {
    opacity: 0.3;
  }
}

.preview-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--card-bgColor--drag);
  color: var(--card-color--drag);
  border-radius: 7px;
  border: 1.5px solid var(--bg-color);
  font-size: 14px;
  font-weight: 600;
  font-family: monospace;
}