@media (max-width: 1080px) {
    
    body {
        height: 100%;
    }
    
    .cabecalho {
        margin-bottom: 20px;
    }

    .cabecalho .logo {
        max-width: 250px;
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 95vw;
        min-width: 60vw;
    }

    .titulo {
        font-size: 20px;
    }
       
    .selecao-de-personagens {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 50px;
    }
    
    .selecao-de-personagens .personagens {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;
    }
    
    .personagens .lista-de-personagens {
        gap: 9px;
        min-width: 80vw;
    }

    .lista-de-personagens .personagem {
        display: flex;
        justify-content: center;
    }

    .lista-de-personagens .personagem img {
        width: 70%;
    }

    .personagem-selecionado {
        max-width: 95vw;
        min-width: none;
    }

    .personagem-selecionado .personagem-grande {
        max-height: 300px;
    }
    
    .personagem-selecionado .descricao-personagem {
        padding: 20px 10px 5px 10px;
        max-height: 150px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

}