body {
  margin: 0px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(90deg, #16c2a8, #39a0eb);
}

.contanier{
    width: 600px;
    height: 400px;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: white;
}

.column{
    flex-direction: column;
    flex: 50%;
    display: flex;
}
.row{
    flex-direction: row;
    flex: 50%;
    display: flex;
}

.cell{
    flex: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; 
}

.cell1  {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #31322c;
}

.color-1{
    background-color: #31322c;
}

.color-2{
    background-color: #39a0ed;
}

.color-3{
    background-color: #1ac19f;
}

.color-4{
    background-color: #4c6085;
}

.size-1{
    flex: 25%;
}

.size-2{
    flex: 75%;
}
.size-3{
    flex: 50%;
}