.instructions {
  @apply w-full h-full relative py-4 px-6 bg-white flex flex-col;
  transform: translateY(100%);
}

.instructions-exit,
.instructions-enter-done {
  transform: translateY(0%);
}

.instructions-enter {
  @apply standard-animation;
  animation-name: move-up-full;
}

.instructions-exit {
  @apply standard-animation;
  animation-name: move-down-full;
}

.instructions .instructions__header h2 {
  @apply text-3xl;
}

.instructions .instructions__header h4 {
  @apply mb-2 font-normal text-grey-darker;
}

.instructions .instructions__content {
  @apply mt-8 p-3 bg-grey-light rounded;
}

.instructions .instructions__content .instructions__instructionable {
  @apply flex items-center my-5;
}

.instructions .instructions__content .instructions__instructionable:first-child,
.instructions .instructions__content .instructions__instructionable:last-child {
  @apply m-0;
}

.instructions .instructions__content .instructions__instructionable {
  @apply tracking-wide;
}

.instructions .instructions__content .instructions__instructionable .image {
  margin-right: 20px;
  width: 30px;
  height: 30px;
}

.instructions .instructions__content .instructions__completion-text {
}

.instructions .instructions__footer {
  @apply mt-6 flex flex-col justify-between h-full;
}

.instructions .instructions__footer .instructions__completion-text {
  @apply text-sm font-semibold;
}

.instructions .instructions__footer .btn {
  @apply w-full;
}