.hero {
  max-width: 337px;
  height: 96px;
  margin: auto;
  position: relative;
}

.left-keyboard,
.right-keyboard {
  position: absolute;
  top: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.left-keyboard {
  width: 188px;
  height: 96px;
  left: 0;
  background-image: url("../images/left-keyboard.svg");
  animation: moveLeftThenDown 7s steps(1, end) forwards;
}

.right-keyboard {
  width: 147px;
  height: 96px;
  left: 187px;
  background-image: url("../images/right-keyboard.svg");
  animation: moveRight 7s steps(1, end) forwards;
}

@keyframes moveRight {
  0% {
    transform: translateX(0);
  }

  14% {
    transform: translateX(-5px);
  }

  28% {
    transform: translateX(-10px);
  }

  42% {
    transform: translateX(-15px);
  }

  58% {
    transform: translateX(-20px);
  }

  72% {
    transform: translateX(-25px);
  }

  86% {
    transform: translateX(-30px);
  }

  99% {
    transform: translateX(-31px);
  }

  100% {
    transform: translateX(-30px);
  }
}

@keyframes moveLeftThenDown {
  0% {
    transform: translate(0, 0);
  }

  84% {
    transform: translate(0, 5px);
  }

  100% {
    transform: translate(0, 5px);
  }
}