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

  main .personagem .imagem {
    height: auto;
  }

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

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

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

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

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

@media (max-width: 415px) {
  main .personagem .imagem {
    height: auto;
    object-fit: cover;
  }

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

  .conteudo {
    top: -20%;
  }

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

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

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

@media (max-width: 391px) {
  .conteudo {
    top: -17%;
    font-size: 12px;
  }

  .botoes {
    top: -7%;
  }
}