.formulario {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Cria 4 colunas de igual largura */
    gap: 10px; /* Espaçamento entre as células do grid */
    padding: 20px;
    border: 1px solid #ccc;
}

.campo {
    grid-column: span 1; /* Cada campo ocupa 1 coluna por padrão */
    margin-bottom: 10px;

}

/* Se você quiser que um campo ocupe mais de uma coluna */
.campo-largo {
    grid-column: span 2;
}

.campo-completo {
    grid-column: span 4;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
select,
textarea {
    width: calc(100% - 12px); /* Ajusta a largura para considerar o padding */
    padding: 8px;
    border: 1px solid #ddd;
    box-sizing: border-box; /* Garante que padding e borda não aumentem a largura total */
    font-size: 18px;
}

button {
    grid-column: span 4; /* O botão ocupa a largura total */
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}
.sucesso {
    color: green;
    background-color: #e6ffe6; /* Um verde claro de fundo opcional */
    padding: 10px;
    border: 1px solid #ccffcc; /* Borda verde clara opcional */
    margin-bottom: 10px; /* Espaço abaixo da mensagem */
  }
  .obrigatorio {
    color: red;
}

  .erro {
    color: red;
    background-color: #ffe6e6; /* Um vermelho claro de fundo opcional */
    padding: 10px;
    border: 1px solid #ffcccc; /* Borda vermelha clara opcional */
    margin-bottom: 10px; /* Espaço abaixo da mensagem */
  }

/* Adaptação para telas menores (opcional) */
@media (max-width: 768px) {
    .formulario {
        grid-template-columns: 1fr; /* Volta para uma coluna em telas menores */
    }

    .campo, .campo-largo, .campo-completo, button {
        grid-column: span 1;
    }
}