<div class="container">
  <div class="wrapper">
    <div class="flair flair--1"></div>
  </div>
      <div class="wrapper">
    <div class="flair flair--3b"></div>
  </div>
  <div class="wrapper">
    <div class="flair flair--4b"></div>
  </div>

  <h4>Spin us, Drag us...</h4>
</div>

html, body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  position: relative;
  width: 90vw;
  height: 90vh;
  max-width: 90vh;
  max-height: 90vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 9px;
}

h4 {
/*   color: var(--mid); */
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 1rem;
  text-align: center;
  pointer-events: none;
}

.flair {
  cursor: pointer;
  width: 70px;
  height: 70px;
  max-height: 15vh;
  max-width: 15vh;
}

.flair--3b {
  background-image:url(https://assets.codepen.io/16327/ui-flair-2.png);
}

.flair--4b {
  background-image:url(https://assets.codepen.io/16327/ui-flair-4.png);
}

gsap.registerPlugin(Draggable, InertiaPlugin);

Draggable.create(".flair--1", {
  type: "x",
  bounds: ".container"
});

Draggable.create(".flair--3b", {
  type: "rotation",
  inertia: true
});

Draggable.create(".flair--4b", {
  bounds: ".container",
  inertia: true
});