.skeleton-card {
  width: 100%;
  float: left;
  border: 1px solid #ddd;
  background: #978a8a;
  padding-bottom: 20px;
}
.skeleton-card .skeleton-image {
  background: #e9ebee;
  height: 375px;
}

.skeleton-bars {
  height: 85px;
}
.skeleton-bars .skeleton-bar {
  background: #e9ebee;
  margin: 0 13px 13px;
  height: 19px;
}
.skeleton-bars .skeleton-bar1 {
  width: 80%;
  margin-top: 17px;
}
.skeleton-bars .skeleton-bar2 {
  width: 30%;
}
.skeleton-bars .skeleton-bar-header {
  width: 100%;
  margin-top: 17px;
}

.skeleton-loading {
  position: relative;
  overflow: hidden;
}
.skeleton-loading::after {
  content: "";
  display: block;
  background-color: #dddfe2;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  animation: 1.5s loading-placeholder ease-in-out infinite;
}

@keyframes loading-placeholder {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}