.main-hero {
    text-align: center;
    position: relative;
}

.main-hero__button {
    margin-top: 32px;
}

.main-hero--inner-wrapper {
    position: relative;
    padding-top: 44.7vw;
}

.main-hero__image {
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
}

.main-hero__image--1 {
    width: 27vw;
    height: 31vw;
    left: 36px;
    top: 36px;
}

.main-hero__image--2 {
    width: 26.7vw;
    height: 31vw;
    top: 28px;
    right: 32px;
}

.main-hero__image--3 {
    width: 35vw;
    height: 24.4vw;
    top: 480px;
    left: 32px;
}

.main-hero__image--4 {
    width: 24vw;
    height: 27vw;
    top: 442px;
    right: 20px;
}

/* .main-hero__image--2 {
    width: 177px;
    height: 206px;
    top: 80px;
    right: 106px;
}

.main-hero__image--3 {
    width: 212px;
    height: 148px;
    top: 529px;
    left: 308px;
}

.main-hero__image--4 {
    width: 140px;
    height: 160px;
    top: 352px;
    right: 276px;
} */


@media screen and (min-width: 750px) {
    .main-hero__content {
        max-width: 48vw;
    }
    
    .main-hero--inner-wrapper  {
        padding-top: 11vw;
    }

    .main-hero__image--1 {
        width: 13vw;
        height: 15.5vw;
        left: 12vw;
        top: 3.6vw;
    }

    .main-hero__image--2 {
        width: 13.5vw;
        height: 15.6vw;
        top: 3vw;
        right: 10vw;
    }

    .main-hero__image--3 {
        width: 17.3vw;
        height: 12vw;
        top: 30vw;
        left: 17.6vw;
    }

    .main-hero__image--4 {
        width: 11.3vw;
        height: 12.6vw;
        top: 26vw;
        right: 12vw;
    }
}

@media screen and (min-width: 1440px) {
    .main-hero__content {
        max-width: 768px;
    }
    
    .main-hero--inner-wrapper  {
        padding-top: 160px;
    }

    .main-hero__image {
        border-radius: 20px;
    }    

    .main-hero__image--1 {
        width: 175px;
        height: 200px;
        left: 146px;
        top: 32px;
    }

    .main-hero__image--2 {
        width: 177px;
        height: 206px;
        top: 80px;
        right: 106px;
    }

    .main-hero__image--3 {
        width: 212px;
        height: 148px;
        top: 440px;
        left: 308px;
    }

    .main-hero__image--4 {
        width: 140px;
        height: 160px;
        top: 352px;
        right: 276px;
    }
}

.main-hero__image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.main-hero__illustration {
    width: 100%;
    display: block;
}