#servicos h2 {
    margin-left: 2rem;
    font-size: 3rem;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    column-gap: 4rem;
    align-items: center;
    margin: 3rem;
}

.card {
    box-shadow: var(--shadow);
    background-color: rgb(235, 232, 232);
    padding: 0.75rem;
    border: 1px solid rgba(128, 128, 128, 0.678);
    border-radius: 15px;
    min-height: 30rem;
}

.card .servicos-text h3 {
    font-size:1.75rem;
    margin-bottom: 1rem;
}

.card .servicos-image {
    width: 100%;
    height: 21rem;
    margin-bottom: 0.75rem;
}

.card .servicos-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .cards {
      grid-template-columns: 1fr; /* 🔥 um card por linha */
      row-gap: 1.5rem;
      margin: 1rem;
    }
  
    .card {
      min-height: auto; /* importante no mobile */
    }
  
    .card .servicos-image {
      height: 14rem; /* imagem menor no mobile */
    }
  }