@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: 100%
    }

    .slider {
        position: relative;
    }

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

    #btn-avancar {
        right: 20%
    }

    #btn-voltar {
        left: 20%
    }
}

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

    .cabecalho {
        font-size: 13px;
    }


}