/* ============================================
   style.css — Week 5: Responsive design
   ============================================ */

.resp-grid {
  display: flex;
  flex-direction: row;   /* standaard: naast elkaar (desktop) */
  gap: 1rem;
}

.resp-kaart {
  flex: 1;
  background: #DCE6F1;
  color: #1F4E79;
  padding: 1.2rem;
  border-radius: 6px;
  text-align: center;
}

.resp-kaart h4 { margin-top: 0; }

/* Media query: alleen actief als het scherm 600px of smaller is */
@media (max-width: 600px) {
  .resp-grid {
    flex-direction: column;  /* op mobiel: onder elkaar */
  }

  .resp-kaart {
    background: #F4CC3B;
    color: #4A3B00;
  }
}