* {
    box-sizing: border-box;
  }
  
  body {
    margin:0;
  }
  
  .container {
    display:flex;
    flex-direction: column;
    background: #EADEDA;
    height:100vh;
  }
  
  .row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:20%;
    padding:10px;
  }
  
  .row2 {
    padding:10px;
    height:80%;
  }
  
  .row-item {
    width:100%;
    height:100%;
    background: #5D5771 ;
  }
  
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    background:#2E294E;
    width:100%;
    height:100%;
  }
  
  .center-item {
    background:#977F27;
    width:20%;
    height:20%;
  }
  
  .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:100%;
    height:100%;
    padding-top:10px;
  }
  
  .column-item {
    height:24%;
    background: #FFD400;
  }
  
  @media all and (min-width: 600px) {
    .row {
        flex-direction: row;
        width: 100%;
    }
    .row-item {
        width:33%;
    }
    .center {
        width:50%;
        height:100%;
      }
    .column {
        width:50%;
        padding-left:10px;
      }
  }

  @media all and (min-width: 768px) {
    .row {
        flex-direction: row;
        width: 100%;
    }
    .row-item {
        width:33%;
    }
    .center {
        width:50%;
        height:100%;
      }*/
    .column {
        width:50%;
        padding-left:10px;
	      padding-top:0;
      }

  }