Botao do Carousel fica atras da imagem

E ai galera...tudo bom?

Será que alguém poderia me dar um help?

Não estou conswguindo colocar os botões do carousel na frente da imagem. O que devo fazer?

segue abaixo meu código:

 <article class="carousel">

               <button class="carousel__botao carousel__botao--anterior" aria-label="Botao de voltar"></button>
               <button class="carousel__botao carousel__botao--proximo" aria-label="Botao de avancar"></button>

           <ul class="carousel__lista-produtos">
                <a href="#" class="carousel__produto">
                    <li class="carousel__imagem-container"><img src="assets/quarto-casal1.jpg" alt="" class="carousel__imagem"></li>
                </a>
                <a href="#" class="carousel__produto">
                    <li class="caroulsel__imagem-container"><img src="assets/quarto-casal2.png" alt="" class="carousel__imagem"></li>
                </a>
                <a href="#" class="carousel__produto">
                    <li class="carousel__imagem-container"><img src="assets/quarto-casal3.png" alt="" class="carousel__imagem"></li>
                </a>
           </ul>

           <div class="carousel__indicdores">
               <button class="carousel__indicador carousel__indicador--ativo" aria-label="Slide 1"></button>
                <button class="carousel__indicador" aria-label="Slide 2"></button>
                <button class="carousel__indicador" aria-label="Slide 3"></button>
                <button class="carousel__indicador" aria-label="Slide 4"></button>
                <button class="carousel__indicador" aria-label="Slide 5"></button>
             </div>
        </article>

.carousel{
   position:relative;


    height: 40rem;
    width: 45rem;

    border-radius:10px 10px 0 0;

    overflow: hidden;
}

.carousel__botao{
    position: absolute;

    width: 2.25rem;
    height: 2.25rem;

    top: 50%;

    transform: translateY(-50%);

    border: none;
    border-radius: 50%;

    background-color: var(--rosa-claro-transparente);
    background-size: .5rem;
    background-position: center;
    background-repeat: no-repeat;

    padding: .2rem;

    z-index: -10;
}

.carousel__botao--anterior{
    left: 0;

    margin-left: 1rem;
    background-position: .8rem center;

}

.carousel__botao--proximo{
    right: 1rem;


    margin-right: 1rem;

    background-position: .8rem center;

}

.carousel__lista-produtos{
    position: relative;
    height: 100%;
}

.carousel__produto{
    position: absolute;
    top: 0;
    bottom: 0;

    width: 100%;
}

.carousel__imagem-container{
    width: 100%;
    height: 100%;
}

.carousel__imagem{
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.carousel__indicdores{
    position: absolute;
    bottom: 0;

    width: 100%;

    display: flex;
    justify-content: center;
}

.carousel__indicador{
    width: 2.25rem;
    height: .25;

    background-color: var(--branco-transparente);

    border-radius: 2rem;

    border: none;
    margin: .5rem 1rem;
}

.carousel__indicador--ativo{
    background-color: var(--laranja);
}