.skeleton {
  position: relative;
  overflow: hidden;
  border: none!important;
  border-radius:5px;
  background-color:transparent !important;
  background-image:none!important;
  margin-bottom: 5px;
}
.skeleton-tag {
  height: 40px!important;
  width: 100px!important;
}
.skeleton-img {
  height: 122px!important;
  width: 220px!important;
}
.skeleton-title {
  height: 20px!important;
  width: 70%!important;
}
.skeleton-desc {
  height: 70px!important;
  width: 100%!important;
}
.skeleton-date {
  height: 20px!important;
  width: 72px!important;
}
.skeleton::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #bbb;
  animation: skeleton-loading-ani 1.5s ease-in-out infinite alternate;
}

@keyframes skeleton-loading-ani { 
  from { 
    background-color: #dddddd90;
  }
  to { 
    background-color: #dddddd30;
  }
}

@media (min-width: 320px) and (max-width:767px) {
  .skeleton-img {
    height: 100px!important;
    width: 100%!important;
  }
  .skeleton-title {
    height: 20px!important;
    width: 70%!important;
  }
  .skeleton-desc {
    height: 70px!important;
    width: 100%!important;
  }
}