.pointer {
  display: none;
  justify-content: center;
  position: absolute;
  text-align: center;
  z-index: 1;
}

.pointer:before {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  pointer-events: none;
  position: absolute;
  width: 10em;
}

.pointer p {
  background: var(--color-blurple);
  border-radius: 0.4em;
  box-shadow:
    0 0.8em 0.4em -0.8em rgba(var(--rgb-blurple), 0.2),
    0 1.2em 0.8em -1.2em rgba(var(--rgb-blurple), 0.3),
    0 1.6em 1.2em -1.6em rgba(var(--rgb-blurple), 0.4)
  ;
  color: var(--color-white);
  font-size: var(--font-size-xxx-small);
  font-style: italic;
  letter-spacing: -0.0125em;
  line-height: 1.3;
  padding: 0.425em 0.65em 0.3em 0.65em;
  position: relative;
}

.pointer--arrow {
  display: flex;
  width: 10em;
}

.pointer--arrow:before {
  background-image: url(/assets/images/pointers/arrow.svg);
  height: 7.2em;
  top: -7em;
  transform: rotate(5deg);
  width: 1.2em;
}

.pointer--arrow p {
  font-size: var(--font-size-xx-small);
  padding: 0.625em 0.85em 0.5em 0.85em;
}

.pointer--noodle:before {
  background-image: url(/assets/images/pointers/noodle.svg);
  height: 0.6em;
  width: 1.2em;
}

.pointer--noodle p {
  font-style: normal;
  padding: 0.525em 0.75em 0.4em 0.75em;
}

.pointer--world-step-1 {
  left: 8.4em;
  top: 6.7em;
  transform: rotate(-15deg);
}

.pointer--world-step-1:before {
  background-image: url(/assets/images/pointers/curly-thumb.svg);
  bottom: 98%;
  height: 3.2em;
}

.pointer--world-step-2 {
  bottom: 8.7em;
  right: -1em;
  transform: rotate(13deg);
}

.pointer--world-step-2:before {
  background-image: url(/assets/images/pointers/long-finger-left.svg);
  background-position: center right;
  height: 1.6em;
  right: 98%;
  top: -0.4em;
}

.pointer--world-step-3 {
  bottom: 4.9em;
  left: -0.8em;
  transform: rotate(7deg);
}

.pointer--world-step-3:before {
  background-image: url(/assets/images/pointers/long-arm.svg);
  background-position: center left;
  height: 1.4em;
  left: 98%;
  top: -0.1em;
}

.pointer--flow-imbox {
  bottom: -0.7em;
  left: -1em;
  transform: rotate(16deg);
}

.pointer--flow-imbox:before {
  background-image: url(/assets/images/pointers/curly-thumb.svg);
  bottom: 98%;
  height: 3.2em;
}

.pointer--flow-the-feed {
  bottom: 8.3em;
  right: -1.7em;
  transform: rotate(12deg);
}

.pointer--flow-the-feed:before {
  background-image: url(/assets/images/pointers/long-finger-left.svg);
  background-position: center right;
  height: 1.6em;
  right: 98%;
  top: -0.4em;
}

.pointer--flow-paper-trail {
  left: -1.6em;
  top: 2.7em;
  transform: rotate(6deg);
}

.pointer--flow-paper-trail:before {
  background-image: url(/assets/images/pointers/long-arm.svg);
  background-position: center left;
  height: 1.4em;
  left: 98%;
  top: -0.5em;
}

.pointer--collections-threads {
  left: 2.3em;
  top: 4.5em;
}

.pointer--collections-threads:before {
  left: 98%;
  top: 77%;
}

.pointer--collections-files {
  left: 21.5em;
  top: 10.6em;
}

.pointer--collections-files:before {
  left: 57%;
  top: 98%;
  transform: rotate(90deg);
}

.pointer--collections-timeline {
  left: 6.2em;
  top: 18.6em;
}

.pointer--collections-timeline:before {
  left: 98%;
  top: 33%;
  transform: rotate(-12deg);
}

.pointer--domains-private {
  left: -1.8em;
  top: 6.7em;
}

.pointer--domains-private:before {
  left: 98%;
  top: 45%;
}

.pointer--domains-custom {
  left: 5.6em;
  top: -1.1em;
}

.pointer--domains-custom:before {
  left: 98%;
  top: 70%;
  transform: rotate(15deg);
}

.pointer--domains-shared {
  right: -2.1em;
  top: 0.5em;
}

.pointer--domains-shared:before {
  right: 98%;
  top: 18%;
  transform: rotate(190deg);
}

.pointer--domains-projects {
  right: 11.5em;
  top: 9.1em;
}

.pointer--domains-projects:before {
  right: 98%;
  top: 5%;
  transform: rotate(180deg);
}

.pointer--domains-extension {
  right: 14.6em;
  bottom: -0.9em;
}

.pointer--domains-extension:before {
  right: 98%;
  top: 13%;
  transform: rotate(180deg);
}

.pointer--domains-manage {
  right: -0.3em;
  bottom: 4.1em;
}

.pointer--domains-manage:before {
  right: 98%;
  top: 30%;
  transform: rotate(150deg);
}

.pointer--domains-add {
  left: 5.6em;
  top: 1.2em;
}

.pointer--domains-add:before {
  left: 98%;
  top: 11%;
  transform: rotate(325deg);
}

.pointer--domains-discuss {
  left: 19.8em;
  top: 7.5em;
}

.pointer--domains-discuss:before {
  left: 60%;
  top: 98%;
  transform: rotate(-250deg);
}

.pointer--domains-replies {
  left: 5.4em;
  top: 11.9em;
}

.pointer--domains-replies:before {
  left: 98%;
  top: 24%;
}

@media(min-width: 64em) {

  .pointer {
    display: flex;
  }

}