@media (max-width: 769px){
   main::after{
    background: linear-gradient(0deg, #000 20%, rgba(0, 0, 0, 0) 65%) no-repeat;
    width: 100vh;
   }

   main .personagem .imagem{
    height: 85%;
   }

   .conteudo{
    justify-content: flex-end;
    left: 0;
    top: -20%;
    max-width: 100vw;
    padding: 30px;
   }

   .conteudo .personagem{
    font-size: 36px;
   }

   .conteudo .descricao{
    max-width: 500px;
   }

   .botoes{
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
    padding: 30px;
   }

   .botoes .botao img{
    max-width: 60px;
   }

}

@media (max-width: 425px){
    main .personagem .imagem{
        height: auto;
    }

    .conteudo .logo{
        width: 170px;
        height: 75px;

    }

    .conteudo{
        top: -30px;
    }

    .conteudo .nome-personagem{
    font-size: 24px;}

    .botoes{
        padding: 20px;
        top: -20%;
    }

    .botoes .botao{
        max-width: 50px;
    }
}