As setas do swiper button não descem!

Estou tentando colocar os botões um pouco para baixo para tentar centralizar com o swipper pagination, porém eles não respondem aos comandos.

@media screen and (min-width: 1024px){

    .carrossel_titulo{
        font-size: 26px;
    }

    .descrição{
        border-radius: 6px;  
    }
    .descrição_texto{
        font-size: 16px;
    }

    .swiper-paginationn{
        margin: 2em 0 3em 0;
    }
    .swiper{
        width: 60%;
    }

    .card{

    }

    .swiper-button-next::after, .swiper-button-prev::after { 
        display: block;
        top: 60%;
    }

}

Eu já tentei fazer com que eles desçam mas de nenhuma forma eles respondem o comando.

HTML:

        <div class="swiper">

            <!-- If we need pagination -->
            <div class="swiper-paginationn"></div>

            <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
                <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt= "Livro sobre ApacheKafka"></div>
                <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro Liderança"></div>
                <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro Portugol"></div>
                <div class="swiper-slide"><img src="img/Nodejs.svg" alt="Livro Nodejs"></div>
                <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro Acessibilidade"></div>
                <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia Front-end"></div>
                <div class="swiper-slide"><img src="img/Angular.svg" alt="Livro Angular"></div>
                <div class="swiper-slide"><img src="img/ReactNative.svg" alt="Livro ReactNative"></div>
            </div>
         <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

        </div>