@keyframes expandWidth {
  from {
    width: var(--initial-width);
    margin-right: auto;
  }

  to {
    width: 100%;
  }
}

@keyframes slideContent {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-expand-width {
  animation: .5s ease-out forwards expandWidth;
}

.animate-slide-content {
  animation: .5s ease-out forwards slideContent;
}

.prose p {
  opacity: 0;
  animation: .5s ease-out forwards fadeIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}