.title{
    text-transform: uppercase;
    color: #ae752d;
    font-size: 7.065vh;
    font-family: "figtree", sans-serif;
    padding: 10.87vh 10.417vw;
}

.event{
    display: flex;
    align-items: flex-start; 
    gap: 1.563vw;
    margin: 0 10.417vw; 
    text-decoration: none;
    padding-bottom: 10vh;
}

.event-image{
    flex: 1;
    max-width: 650px;
    width: 100%;
    object-fit: cover;
}
.subtitle{
    color: #000;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 3.261vh;
    font-weight: bold;
}
.text{
    font-family: "figtree", sans-serif;
    font-size: 2.717vh;
}
.body{
    color: #000;
    margin: 0;

}

/* Coloque isso no final do seu arquivo CSS */

@media (max-width: 768px) {

  /* 1. Ajusta o Título Principal */
  .title {
    /* Troca 'vh' por 'rem' para um tamanho estável */
    font-size: 2.5rem; 

    /* Troca 'vh'/'vw' por valores mais estáveis */
    padding: 40px 5vw;

    /* Fica melhor centralizado no mobile */
    text-align: center;
  }

  /* 2. Ajusta o layout do Evento */
  .event {
    /* A MUDANÇA PRINCIPAL:
       Empilha a imagem e o texto (em vez de lado a lado) */
    flex-direction: column;

    /* Centraliza os itens (imagem e texto) */
    align-items: center;

    /* Reduz as margens laterais */
    margin: 0 5vw;

    /* Troca 'vh' por 'px' para um espaçamento estável */
    padding-bottom: 50px; 
  }

  /* 3. Ajusta os textos */
  .text {
    /* 25px é muito grande para texto de corpo no celular */
    font-size: 1.1rem; /* (aprox. 18px) */
    text-align: center;
  }

  .subtitle {
    /* Centraliza o subtítulo */
    text-align: center;
    /* (Adicione um font-size em 'rem' se ele também estiver em 'vh') */
    /* font-size: 1.5rem; */
  }

  .body {
    /* Garante que o texto fique centralizado */
    text-align: center;
  }
}