.banner {
  position: relative;
  background-image: linear-gradient(to right, #ae752d, transparent 100%), url("../images/banner_rocha.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 23.914vh;
  display: flex;
}
.title{
  text-transform: uppercase;
  color: #f2f1ee;
  text-align: left;
  font-size: 7.609vh;
  font-family:"figtree", sans-serif;
  padding: 10.87vh 10.417vw 5.435vh;
}
.text{
  font-family:"figtree", sans-serif;
  padding: 3.261vh 10.417vw;
}

.subtitle{
  font-size: 4.891vh;
}
.body{
  padding-top: 3.261vh;
  font-size: 2.717vh;
}
.instagram-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 30px;
  margin-top: 40px;
  padding: 0 10.417vw;
}

.instagram-grid .post,
.instagram-grid .partner-card {
  width: 100%;
}

/* Esta regra força o post do Instagram a ocupar 100% */
.instagram-grid blockquote.instagram-media {
  /* Força o post a ser GRANDE (ignora os 540px) */
  max-width: 100% !important;
  min-width: 100% !important;
  width: 100% !important;
  
  /* Garante que as margens não atrapalhem */
  margin: 1px 0 !important; 
}


@media (min-width: 768px) {
  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {

    /* 1. Ajuste do Banner */
    .banner {
        /* Define uma altura fixa para o banner no celular */
        height: 200px;
    }

    /* 2. Ajuste do Título Principal */
    .title {
        /* Troca 'vh' por 'rem' para um tamanho estável */
        font-size: 2.5rem; /* (aprox. 40px) */
        
        /* Centraliza o título no celular */
        text-align: center;

        /* Troca 'vh'/'vw' por 'px' e 'vw' (menor) */
        padding: 40px 5vw 20px;
    }

    /* 3. Ajuste do Bloco de Texto */
    .text {
        /* Centraliza todos os textos dentro dele */
        text-align: center;

        /* Ajusta o padding */
        padding: 20px 5vw;
    }

    /* 4. Ajuste do Subtítulo */
    .subtitle {
        /* Troca 'vh' por 'rem' */
        font-size: 1.8rem; /* (aprox. 29px) */
    }

    /* 5. Ajuste do Corpo do Texto */
    .body {
        /* Troca 'vh' por 'rem' e 'px' */
        padding-top: 20px;
        font-size: 1.1rem; /* (aprox. 18px) */
    }
    
    /* 6. Ajuste do Grid do Instagram */
@media (max-width: 767px) { /* 767px para não conflitar com o min-width */
    .instagram-grid {
        /* Reduz o padding lateral para telas pequenas */
        padding-left: 5vw;
        padding-right: 5vw;
    }
}
}