body {
  flex-flow: wrap;
  place-content: safe center;
  align-items: safe center;
  gap: 10px;
  width: 100%;
  height: 100%;
  display: flex;
}

.card.draggable {
  cursor: auto;
  touch-action: auto;
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;

  & .handle {
    touch-action: none;
    cursor: grab;
    background-color: #0003;
    border-radius: 4px;
    justify-content: safe center;
    align-items: safe center;
    width: 40px;
    height: 40px;
    display: flex;
    position: absolute;
    top: 4px;
    right: 4px;

    .card.pointer-dragging & {
      cursor: grabbing;
    }

    .card.keyboard-dragging & {
      cursor: auto;
    }

    & svg {
      width: 24px;
      height: 24px;
    }

    @media (hover: hover) and (pointer: fine) {
      .card:not(.keyboard-dragging) &:hover, .card.pointer-dragging & {
        background-color: #0000004d;
      }
    }
  }
}