1
resposta

Faça como eu fiz: estrutura e estilização do formulário.

newsletter.

display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xl);
    width: 100%;
    padding: var(--padding-4xl) 0;
    background-color: var(--cor-secundaria-light);
  }
  
  .newsletter h2 {
    color: var(--cor-primaria-light);
  }
  
  .newsletter p {
    font-size: var(--font-size-xm);
  }
  

Formulário.

.formulario {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--padding-m);
    align-items: center;
  }
  .formulario-input {
    padding: var(--padding-s) var(--padding-l);
    border: 1px solid var(--cor-neutra-dark);
    background-color: transparent;
    border-radius: 2rem;
    flex: 1 0 200px;
  }
  
  .botao-enviar {
    padding: var(--padding-s) var(--padding-l);
    background-color: var(--cor-primaria-light);
    color: var(--cor-neutra-light);
    border: none;
    border-radius: 32rem;
    cursor: pointer;
    font-size: var(--font-size-xm);
  }
  .formulario-input:user-valid {
    border: 2px solid var(--cor-terciaria-dark);
  }  
  
  .formulario-input:user-invalid {
    border: 2px solid var(--cor-primaria-dark);
  }

Grupo Opções.

.grupo-opcoes {
    display: flex;
    align-items: center;
    gap: var(--padding-s);
    flex-wrap: wrap;
  }
  
  .opcao input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  .opcao input[type="checkbox"] + span {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--cor-neutra-dark);
    background-color: transparent;
    border-radius: 0.25rem;
  }
  
  .opcao input[type="checkbox"]:checked + span {
    background-color: var(--cor-primaria-light);
  }
1 resposta

Oi, Estanislau! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Você estruturou o formulário com muito cuidado, usando flex-wrap e variáveis personalizadas para deixar tudo responsivo e coerente com o restante da interface. Destaque também para o uso dos pseudo-seletores :user-valid e :user-invalid, que enriquecem a experiência com feedback visual.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!