/* ============================================
   style.css — Week 4: Layout met Flexbox
   ============================================ */

.flex-uitleg {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.flex-uitleg div {
  background: #DCE6F1;
  color: #1F4E79;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  font-family: monospace;
}

/* De flex-container: de OUDER bepaalt hoe de kinderen zich gedragen */
.mondriaan {
  display: flex;
  flex-direction: row;   /* naast elkaar; column = onder elkaar */
  flex-wrap: wrap;       /* laat vakken naar een nieuwe regel gaan als het niet past */
  justify-content: flex-start;
  align-items: stretch;
  gap: 6px;
  border: 6px solid #111;
  padding: 6px;
  background: #fff;
  max-width: 500px;
}

.vak {
  height: 90px;
  flex: 1 1 100px; /* mag groeien/krimpen, basisbreedte 100px */
}

.vak.rood    { background-color: #D9333F; }
.vak.blauw   { background-color: #1B4F9C; }
.vak.geel    { background-color: #F4CC3B; }
.vak.wit     { background-color: #FAFAFA; border: 2px solid #111; }
.vak.groot   { flex: 2 1 200px; }