* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-wrap: wrap;
}
div {
  background-color: black;
  border: 4px solid white;
  flex-basis: 16vw;
  flex-grow: 1;
  height: 33.33vh;  
}
@media (orientation: portrait) {
  div{
    flex-basis: 32vw;
    height: 16.66vh;
  }
}
.yellow {
  background-color: yellow;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.red {
  background-color: red;
}
.brown {
  background-color: brown;
}
.silver {
  background-color: silver;
}
.orange {
  background-color: orange;
}
.violet {
  background-color: violet;
}
.pink {
  background-color: pink;
}
.off {
  background-color: beige;
}
.hidden {
  background-color: black;
}