[Dúvida] Carousel, overflow e hover

Olá, estou fazendo o challenge #7DaysOfCode de HTML e CSS proposto pela Fernanda Degolin de uma cópia da página principal do Netflix. No carrossel de filmes eu fiz o scroll com overflow: auto e isso está atrapalhando o hover de escala que apliquei nos elementos do carrossel. A imagem aumenta para os lados e acima das outras imagens como desejado, mas fica "cortada" em cima e embaixo, dentro do container. Tentei mil maneiras (z-index, position absolute,...) mas não consegui fazer funcionar direito. Se alguém tiver uma solução, ficaria agradecida!

Segue uma parte do CSS:

div {
    display: flex;
    align-items: center;
}

div ul {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: .5rem;
    margin: 0 -3.2rem;
}

div ul li {
    display: inline-block;
    text-align: center;
    margin-right: .1rem;
    transition: .2s;
    border-radius: .2rem;
}

div ul li img {
    width: 15rem;
}

div ul li:hover{
    -ms-transform: scale(1.4);
    -webkit-transform: scale(1.4);  
    transform: scale(1.4);
    border-radius: .4rem;
}