.overlapping_anim_images {
    position: relative;
    max-width: 66.75rem; /*1068px;*/
    margin: 0 auto 1.5rem;
    background-size: cover;
    background-position: center;
    aspect-ratio: 2/1;
}
.overlapping_anim_images > div {
    /* overflow: hidden; */
    position: absolute;
    width: 72%;
    aspect-ratio: 2.75/1;
}
.overlapping_anim_images .top-img {
    top: 2rem; right: 2rem;
    z-index:2
}
.overlapping_anim_images .top-img > div {
    background-position: top right;
    transform: translate(calc(-14% - 0.5rem), 34%);
    opacity: 0;
}
.overlapping_anim_images .bottom-img {
    bottom: 2rem; left: 2rem;
}
.overlapping_anim_images .bottom-img > div {
    background-position: bottom left;
    transform: translate(calc(14% + 0.5rem), -34%);
    opacity:0
}
.anim-overlap-top-img.anim-visible {
  -webkit-animation: anim-overlap-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: anim-overlap-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes anim-overlap-top {
  0%{
    -webkit-transform: translate(calc(-14% - 0.5rem), 34%);
    transform: translate(calc(-14% - 0.5rem), 34%);
    opacity: 0;
  }
  100%{
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
  }
}
.anim-overlap-bottom-img.anim-visible {
  -webkit-animation: anim-overlap-bottom 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: anim-overlap-bottom 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes anim-overlap-bottom {
  0%{
    -webkit-transform: translate(calc(14% + 0.5rem), -34%);
    transform: translate(calc(14% + 0.5rem), -34%);
    opacity: 0;
  }
  100%{
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
  }
}


.overlapping_anim_images > div > div {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    border-radius: 3px;
    box-shadow: 0px 2.168px 4.336px -2.168px rgba(0, 0, 0, 0.05), 0px 4.336px 6.503px -1.084px rgba(0, 0, 0, 0.10);

    /* -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0); */
    /* -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%; */

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@media only screen and (max-width: 767px) {
    .overlapping_anim_images .top-img {
        top: 1rem; right: 1rem;
    }
    .overlapping_anim_images .bottom-img {
        bottom: 1rem; left: 1rem;
    }
}