.skeleton-card {
  background-color: #ffffff;
  border-radius: 6px;
  // box-shadow: 1px 0 8px 0 rgb(0 0 0 / 5%), 8px 8px 18px 0 rgb(0 0 0 / 5%);
  margin: 20px auto;
  /* max-width: 500px; */
  overflow: hidden;
  position: relative;
  // width: 100%;
}

.skeleton {
  background-color: #f2f2f2;
  border-radius: 5px;
  height: 20px;
  margin: 20px 0;
  width: 100%;
  animation: loading 1s ease-in-out infinite;
  transform-origin: 0% 50%;
}

.skeleton + .skeleton {
  animation-delay: 0.5s;
}

.skeleton + .skeleton + .skeleton {
  animation-delay: 0.3s;
}

.skeleton + .skeleton + .skeleton + .skeleton {
  animation-delay: 0.6s;
}

.skeleton + .skeleton + .skeleton + .skeleton + .skeleton {
  animation-delay: 0.5s;
}

@keyframes loading {
  0% {
    transform: translateX(-100%) skewX(-30deg);
  }
  100% {
    transform: translateX(200%) skewX(30deg);
  }
}

.loading-animation-text {
  font-family: sans-serif;
  margin: 10px;
  color: #838383;
  font-size: 16px;
  font-weight: 100;
}