.main-div {
  background-color: gray;
  max-width: 18.625em;
  max-height: 12.375em;
  overflow: hidden;
}
/*LONG ANIMATIONS*/
.long-image-div-front {
  transform: translateY(-80%) translateX(110%) rotate(-30deg);
  box-shadow: 0 8px 16px 16px rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.long-image-div-back {
  transform: translateY(-10%) translateX(20%) rotate(-30deg);
  box-shadow: 0 8px 16px 8px rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.long-animation {
  animation: longAnimation 5s linear infinite;
}
@keyframes longAnimation {
  0% {
    transform: translateY(-80%) translateX(+60%) rotate(-30deg);
    width: 60%;
    background-position: top;
  }
  10% {
    transform: translateY(-100%) translateX(+0%) rotate(0deg);
    width: 100%;
    height: 100%;
    background-position: top;
  }
  100% {
    transform: translateY(-100%) translateX(+0%) rotate(0deg);
    width: 100%;
    height: 100%;
    background-position: bottom;
  }
}
/*LONGSLANT ANIMATIONS*/
.longslant-image-div-front {
  transform: translateY(-70%) translateX(30%);
  box-shadow: 0 8px 16px 16px rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.longslant-image-div-back {
  transform: translateY(0%) translateX(120%);
  box-shadow: 0 8px 16px 8px rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.longslant-animation {
  animation: longstantAnimation 5s linear infinite;
}
@keyframes longstantAnimation {
  0% {
    transform: translateY(-70%) translateX(+30%);
    width: 60%;
    background-position: top;
  }
  10% {
    transform: translateY(-100%) translateX(+0%);
    width: 100%;
    height: 100%;
    background-position: top;
  }
  100% {
    transform: translateY(-100%) translateX(+0%);
    width: 100%;
    height: 100%;
    background-position: bottom;
  }
}
/*SQUARE ANIMATIONS*/
.square-animation {
  animation: squareAnimation 5s linear infinite;
}
.square-image-div-front {
  transform: translateY(-280%) translateX(230%) rotate(-25deg);
  box-shadow: 0 8px 16px 16px rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.square-image-div-back-1 {
  transform: translateY(-55%) translateX(-55%) rotate(-25deg);
  box-shadow: 0 8px 16px 8px rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.square-image-div-back-2 {
  transform: translateY(-60%) translateX(35%) rotate(-25deg);
  box-shadow: 0 8px 16px 8px rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.square-image-div-back-3 {
  transform: translateY(-158%) translateX(115%) rotate(-25deg);
  box-shadow: 0 8px 16px 8px rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@keyframes squareAnimation {
  0% {
    transform: translateY(-280%) translateX(80%) rotate(-25deg);
    width: 60%;
    background-position: top;
  }
  10% {
    transform: translateY(-300%) translateX(+0%) rotate(0deg);
    width: 100%;
    height: 100%;
    background-position: top;
  }
  100% {
    transform: translateY(-300%) translateX(+0%) rotate(0deg);
    width: 100%;
    height: 100%;
    background-position: bottom;
  }
}