.content-placeholder {
  background-repeat: repeat;
  background-size: 300px auto;
}

.content-placeholder-item {
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border-radius: 6px;
  background: linear-gradient(45deg, #ebebeb, #efefef);
  background-size: 1200px;
  position: absolute;
}

.content-placeholder-item:nth-child(1) {
  top: 0%;
  left: 0%;
  height: 3rem;
  width: 100%;
  background: linear-gradient(45deg, #354a5f, #efefef);
  border-radius: 0px;
}

.content-placeholder-item:nth-child(2) {
  top: 12%;
  left: 4%;
  height: 40px;
  width: 14%;
}

.content-placeholder-item:nth-child(3) {
  top: 18%;
  left: 4%;
  height: 300px;
  width: 28%;
}

.content-placeholder-item:nth-child(4) {
  top: 60%;
  left: 4%;
  height: 40px;
  width: 14%;
}

.content-placeholder-item:nth-child(5) {
  top: 66%;
  left: 4%;
  height: 200px;
  width: 40%;
  background: linear-gradient(90deg, #ebebeb, #f7f7f7)
}

.content-placeholder-item:nth-child(6) {
  top: 12%;
  left: 38%;
  height: 40px;
  width: 12%;
  background: linear-gradient(90deg, #ebebeb, #f7f7f7);
}

.content-placeholder-item:nth-child(7) {
  top: 18%;
  left: 38%;
  height: 300px;
  width: 28%;
  background: linear-gradient(90deg, #ebebeb, #f7f7f7);
}

@media only screen and (max-width: 1280px) {
  .content-placeholder-item:nth-child(2) {
    top: 12%;
    left: 6%;
    height: 30px;
    width: 14%;
  }
  .content-placeholder-item:nth-child(3) {
    top: 20%;
    left: 6%;
    height: 200px;
    width: 28%;
  }
  .content-placeholder-item:nth-child(4) {
    top: 62%;
    left: 6%;
    height: 30px;
    width: 14%;
  }
  .content-placeholder-item:nth-child(5) {
    top: 70%;
    left: 6%;
    height: 140px;
    width: 40%;
    background: linear-gradient(90deg, #ebebeb, #f7f7f7)
  }
  .content-placeholder-item:nth-child(6) {
    top: 12%;
    left: 38%;
    height: 30px;
    width: 12%;
    background: linear-gradient(90deg, #ebebeb, #f7f7f7);
  }
  .content-placeholder-item:nth-child(7) {
    top: 20%;
    left: 38%;
    height: 200px;
    width: 28%;
    background: linear-gradient(90deg, #ebebeb, #f7f7f7);
  }
}

@media only screen and (max-width: 900px) {
  .content-placeholder-item:nth-child(2) {
    top: 12%;
    left: 6%;
    height: 30px;
    width: 30%;
  }
  .content-placeholder-item:nth-child(3) {
    top: 18%;
    left: 6%;
    height: 320px;
    width: 88%;
    background: linear-gradient(90deg, #ebebeb, #f7f7f7);
  }
  .content-placeholder-item:nth-child(4) {
    top: 66%;
    left: 6%;
    height: 30px;
    width: 14%;
  }
  .content-placeholder-item:nth-child(5) {
    top: 72%;
    left: 6%;
    height: 180px;
    width: 40%;
  }
  .content-placeholder-item:nth-child(6), .content-placeholder-item:nth-child(7) {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .content-placeholder-item:nth-child(2) {
    top: 12%;
    left: 6%;
    height: 30px;
    width: 30%;
  }
  .content-placeholder-item:nth-child(3) {
    top: 18%;
    left: 6%;
    height: 320px;
    width: 88%;
  }
  .content-placeholder-item:nth-child(4) {
    top: 66%;
    left: 6%;
    height: 30px;
    width: 14%;
  }
  .content-placeholder-item:nth-child(5) {
    top: 72%;
    left: 6%;
    height: 180px;
    width: 88%;
  }
  .content-placeholder-item:nth-child(6), .content-placeholder-item:nth-child(7) {
    display: none;
  }
}