#swipe {
  position: absolute;
  display: block;
  width: 100px;
  left: 15%;
  align-self: flex-end;
  aspect-ratio: 1 / 1;
  scale: 0.6;
  grid-area: 1/ 4/ 4/ 5;
  z-index: 5;
  pointer-events: none;
}

#hand {
  position: relative;
  background-image: url('/images/patterns/hand.svg');
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  aspect-ratio: 1/1;
  scale: 0.75;
}

.swiping {
  rotate: 90deg;
  left: 60% !important;
  top: 65% !important;
  z-index: -1;
}

/* = Portrait = */
@media (orientation: portrait) {
  .swiping {
    left: -2% !important;
    top: 75% !important;
  }
}

/* Animations */

@keyframes swipe-hand {
  25% {
    transform: translate(4vw) rotate(30deg);
  }

  50% {
    transform: translate(-4vw) rotate(-15deg);
  }

  100% {
    transform: translate(0) rotate(0);
  }
}