@media (max-width: 768px) {
	main::after {
		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 70%) no-repeat;
		width: 100vw;
	}

	main .personagem .imagem {
		height: 85%;
		object-position: center;
	}

	.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;
	}

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

	.botoes .botao img {
		max-width: 100%;
	}
}

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

	.conteudo {
		top: -20%;
	}

	.botoes {
		padding: 20px;
		top: -10%;
	}
	.botoes .botao {
		max-width: 50px;
		max-height: 50px;
	}
}