.item1 { grid-area: elab; }
.item2 { grid-area: inova; }
.item3 { grid-area: notas; }
.item4 { grid-area: comunica; }
.item5 { grid-area: doses; }
.item6 { grid-area: indica; }
.item7 { grid-area: ivi; }
.item8 { grid-area: somos; }

.grid-container {
  display: grid;
  grid-template-areas:
    'elab inova notas comunica'
    'doses inova notas somos'
    'doses indica ivi somos'
    'doses indica ivi somos';
  gap: 10px;
  padding: 16px;
  margin: 0 auto;
  height: auto;
  min-height: 60vh;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  border: 0;
  border-radius: 16px;
}

.hover-up:hover{
    transform: translateY(-6px) !important;
}
.border-orange{
    border: 3px solid #ff4a2d !important;
    border-radius: 42px !important;
}

#send .item1 { grid-area: person; min-width: 426px; max-width: 426px;}
#send .item2 { grid-area: colaboradores; min-width: 426px; max-width: 426px;}
#send .item3 { grid-area: notas; max-width: 800px; }

#send .item2 img{
    min-width: 110px; 
    max-width:100px; 
    height:100px;
    object-fit: cover !important;
    border-radius: 12px;
}

#send .grid-container {
  display: grid;
  grid-template-areas:
    'person person notas notas notas'
    'person person notas notas notas'
    'colaboradores colaboradores notas notas notas';
  gap: 12px;
  padding: 14px;
  margin: 0 auto;
  height: auto;
  min-height: 30vh;
  max-width: 1380px;
}

#send .grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  border: 0;
  border-radius: 16px;
}

/* Responsividade */
@media (max-width: 992px) { /* lg do Bootstrap */
    #send .grid-container {
      grid-template-areas: none; /* Remove o layout da grid */
      grid-auto-rows: auto; /* Ajusta automaticamente as alturas */
      grid-template-columns: 1fr; /* Uma única coluna */
      display: flex;
      flex-direction: column;
    }
  
    #send .item1,
    #send .item2,
    #send .item3 {
      min-width: 100%; /* Garante que ocupem toda a largura */
      max-width: 100%;
    }
    
    #send .item2 {
      display: flex;
      flex-wrap: wrap; /* Ajusta os itens internamente em múltiplas linhas */
      justify-content: center; /* Centraliza os itens */
      gap: 10px; /* Espaçamento entre os itens */
    }
  
    #send .item2 img {
      min-width: 130px; /* Ajusta as dimensões das imagens */
      max-width: 130px;
      height: 130px;
    }
  }