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

    #tbn-avancar {
        right: 20%;
    }

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

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

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