* {
  box-sizing: border-box;
}

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
/*  flex: 33%; */
  flex: 25%;
  padding: 10px;
}

/* On screens that are 992px wide or less, go from four columns to three columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 33%;
  }
} 
/* On screens that are 796px wide or less, go from three columns to two columns */
@media screen and (max-width: 796px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}