.styles_hero__hJ5d_ {
    width: 100%;
    height: 50h;
    min-height: 500px;
    position: relative;
    margin-bottom: 8vh
}

.styles_hero1__dCgxw,
.styles_hero2__RE_V7,
.styles_hero3__rYQMm,
.styles_hero4__QSzCi {
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    margin-left: auto;
    margin-right: auto;
    transition: transform .5s cubic-bezier(.8, 0, .23, 1);
    width: 90vw;
    max-width: 420px;
    height: 90vw;
    max-height: 420px
}

.styles_hero1__dCgxw {
    padding: 5%;
    background-color: #fff;
    z-index: 5
}

.styles_hero2__RE_V7 {
    background-color: #ff5900;
    z-index: 4
}

.styles_hero3__rYQMm {
    background-color: #31b9fc;
    z-index: 3
}

.styles_hero4__QSzCi {
    background-color: #04cf4f;
    z-index: 2
}

.styles_hero1ActiveL__jHAxl {
    transform: rotate(10deg)
}

.styles_hero2ActiveL___YLDQ {
    transform: rotate(20deg)
}

.styles_hero3ActiveL__em0c1 {
    transform: rotate(30deg)
}

.styles_hero4ActiveL__xnyF_ {
    transform: rotate(40deg)
}

.styles_hero1ActiveR__rzv_z {
    transform: rotate(-10deg)
}

.styles_hero2ActiveR__uy_PX {
    transform: rotate(-20deg)
}

.styles_hero3ActiveR__2D09c {
    transform: rotate(-30deg)
}

.styles_hero4ActiveR__SNzwD {
    transform: rotate(-40deg)
}

@media (max-width:768px) {
    .styles_hero__hJ5d_ {
        height: 400px
    }

    .styles_hero1__dCgxw,
    .styles_hero2__RE_V7,
    .styles_hero3__rYQMm,
    .styles_hero4__QSzCi {
        max-width: 350px;
        max-height: 350px
    }
}

@media (max-width:480px) {
    .styles_hero__hJ5d_ {
        height: 350px
    }

    .styles_hero1__dCgxw,
    .styles_hero2__RE_V7,
    .styles_hero3__rYQMm,
    .styles_hero4__QSzCi {
        max-width: 300px;
        max-height: 300px
    }
}

@media screen and (min-width:780px) and (max-width:932px) and (min-height:359px) and (max-height:430px) and (orientation:landscape) {
    .styles_hero__hJ5d_ {
        height: 640px;
        margin-bottom: 10vh
    }
}