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

    .slider {
        gap: 10px;
    }
}   

@media(max-width: 496px) {
    header {
        display: none;
    }

    .lista-personagens {
        width: 250px;
    }
    
    .carta {
        width: 100%;
    }

    .slider {
        position: relative;
    }

    .btn {
        position: absolute;
        bottom: -0.1%;
        max-width: 100%;
        max-height: 28px;     
        z-index: 5;   
    }

    #btn-avancar {
        right: 20%;
    }

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