css3 – Problema com barra de rolagem no css

Tenho uma div main e dentro dela tem duas imagens com position absolute, a div main ta configurada pra seguir a altura do navegador (100vh), Quero que as imagens fiquem escondidas no canto ou seja o overflow-x: hidden, e pra baixo ele quebra a div e continue mostrando a imagem ou seja overflow-y: visible. O problema é que quando o “overflow-x: hidden” ta definido não importa o que eu coloque em overflow-y sempre fica com uma parra de rolagem, preciso de uma solução desaparecer com essa barra de rolagem.

code:

.intro .intro-image{
    width: 57%;
    overflow-x: hidden;
    overflow-y: unset;
    overflow-y: visible;
    position: relative;
}



.intro .intro-image .ilutration-img{
    position: relative;
    margin-top: -250px;
    z-index: 10;

}

.intro .intro-image .ilutration_mockup-img{
    position: absolute;
    top: -125px;
    right: -140px;
    z-index: 11;

}

insira o código aqui