تصميم متجاوب بـ Media Query — تحدي CSS

الشبكة .cards بثلاثة أعمدة افتراضياً. أضف @media (max-width: 600px) يجعلها عموداً واحداً (grid-template-columns: 1fr).

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* أضف media query للشاشات الصغيرة */