/****as regras só funcionarão em telas com tamanho de 1024x e pega telas de 686px ate 1024px****/

@media(max-width: 1024px){
   .card-item{
     width: 40%;
     margin: 20px 0;
   }

   .video, .video iframe{
     height: auto;
   }

   .personagem-texto, .personagem-imagem{
    width: 80%;
    margin: auto;

   }

   .order-1 {order: 2;}
   .order-2 {order: 1;}
}

/****as regras só funcionarão em telas com tamanho de 685px e pega telas de 1px ate 685px****/

@media(max-width: 685px){
  .header-page {
    flex-direction: column;
  }

  .container h1 {
    margin-top: 70px 0; 
  }
  

  .card-item{
    width: 80%
  }
}


@media(max-width: 470px){
   .header-menu a {
    font-size: 11px; 
    display: block;
    text-align: center;
    padding: 5px 0;
   }
}