.hero-container {
    position: absolute;
}

/* Screen 1 */
.hero-img-left {
    position: absolute;
    left: -100px;
    bottom: -200px;
    transform: translateY(100%) scale(0.01);
    opacity: 0;
}
.hero-img-center {
    transform: translateY(100%);
    opacity: 0;
}
.hero-img-right {
    transform: translateX(100%) scale(0.01);
    opacity: 0;
    position: absolute;
    right: -200px;
    top: -160px;
}

/* Screen 2 */
.hero-img-center1 {
    position: absolute;
    top: 50%;
    left: 50%;
}
.hero-img-center2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Screen 3 */
.hero-img-top {
    position: absolute;
    top: 0;
    right: 0;
}
.hero-img-bottom1 {
    position: absolute;
    bottom: 0;
    right: 0;
}
.hero-img-bottom2 {
    position: absolute;
    bottom: 0;
    right: 0;
}
.hero-img-ctop {
    position: absolute;
    top: -382px;
    left: 50%;
    transform: translateX(-50%);
}
.hero-img-cbottom {
    position: absolute;
    bottom: -382px;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 1640px) {
    .hero-img-left {
        bottom: -150px;
    }
    .hero-img-right {
        right: -150px;
    }

    .hero-img-left img {
        max-width: 323px;
    }
    .hero-img-center img {
        max-width: 255px;
    }
    .hero-img-right img {
        max-width: 400px;
    }
    .hero-img-ctop img {
        max-width: 265px;
    }
    .hero-img-top img {
        max-width: 490px;
    }
    .hero-img-bottom1 img {
        max-width: 584px;
    }
    .hero-img-bottom2 img {
        max-width: 507px;
    }
    .hero-img-cbottom img {
        max-width: 336px;
    }
}

@media screen and (max-width: 1366px) {
    .hero-img-left {
        bottom: -100px;
    }
    .hero-img-right {
        right: -100px;
    }
    .hero-img-left img {
        max-width: 290.7px;
    }
    .hero-img-center img {
        max-width: 229.5px;
    }
    .hero-img-right img {
        max-width: 320px;
    }

    .hero-img-center1 img,
    .hero-img-center2 img {
        max-width: 150px;
    }
    .hero-img-ctop img {
        max-width: 238.5px;
    }
    .hero-img-top img {
        max-width: 441px;
    }
    .hero-img-bottom1 img {
        max-width: 525.6px;
    }
    .hero-img-bottom2 img {
        max-width: 456.3px;
    }
    .hero-img-cbottom img {
        max-width: 302.4px;
    }
}

@media screen and (max-width: 1024px) {
    .hero-img-left img {
        max-width: 261.63px;
    }
    .hero-img-center img {
        max-width: 206.55px;
    }
    .hero-img-right img {
        max-width: 243px;
    }
    .hero-img-ctop img {
        max-width: 214.65px;
    }
    .hero-img-top img {
        max-width: 396.9px;
    }
    .hero-img-bottom1 img {
        max-width: 473.04px;
    }
    .hero-img-bottom2 img {
        max-width: 410.67px;
    }
    .hero-img-cbottom img {
        max-width: 272.16px;
    }
}

@media screen and (max-width: 767px) {
    .hero-img-left {
        bottom: -100px;
    }
    .hero-img-right {
        right: -60px;
    }
    .hero-img-left img {
        max-width: 209.30px;
    }
    .hero-img-center img {
        max-width: 165.24px;
    }
    .hero-img-center1 img,
    .hero-img-center2 img {
        max-width: 120px;
    }
    .hero-img-right img {
        max-width: 194.40px;
    }
    .hero-img-ctop img {
        max-width: 171.72px;
    }
    .hero-img-top img {
        max-width: 317.52px;
    }
    .hero-img-bottom1 img {
        max-width: 378.43px;
    }
    .hero-img-bottom2 img {
        max-width: 328.54px;
    }
    .hero-img-cbottom img {
        max-width: 217.73px;
    }
}