@media(max-width:768px){
    body{
        background-position: center;
        padding: 0 15px;
    }

    .slider{
        gap: 10px;
    }
}

@media(max-width: 496px){
    .lista-personagens{
        width: 250px;
    }

    .imagem-carta{
        width: 100px;
    }

    .slider{
        position: relative;
    }

    .btn-seta{
        position: absolute;
        bottom: -13%;
    }

    #btn-avancar{
        right: 20%;
    }

    #btn-voltar{
        left: 20px;
    }
}

@media(max-width: 375px){
    body{
        justify-content: start;
        padding-top: 10px;
        gap: 10px;
    }

    .cabecalho{
        font-size: 12px;
    }
}