Exercício: card que vira coluna no mobile
Um cartão lado a lado (foto + texto) que precisa empilhar em telas estreitas.
Estudar esta lição interativa →O .card no CSS do editor é um flex em linha (flex-direction: row, o padrão). Adicione uma @media que troque para flex-direction: column em telas estreitas. Dica: o ambiente de teste deste exercício simula uma tela bem estreita, então uma @media (max-width: ...) corretamente escrita já é suficiente para o card empilhar no teste.
Adicione uma @media que faça o .card empilhar (flex-direction: column) em tela estreita (400px) e continuar lado a lado (flex-direction: row) em tela larga (1200px). Pode ser com max-width, ou começando pela coluna e voltando a row com min-width.
.card{
display: flex;
gap: 12px;
background:#eef2ff;
padding: 14px;
}
.foto{ width:70px; height:70px; background:#6366f1; border-radius:8px; }
/* sua vez: adicione a media query aqui */
🧩 Este é um exercício com correção automática — abra no app para completá-lo e verificar.