* { box-sizing: border-box; }

.grid {
  border: none;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 1%;
}

.grid-col {
  -ms-flex-positive: 1;
  flex-grow: 1;
  /* margin-right: 2%; */
  min-width: 20%;
  /* background: #DDD; */
}

/*
.grid-col--4 { margin-right: 0; }
*/

/* hide two middle */
.grid-col--2, .grid-col--3 , .grid-col--4 { display: none; }

@media ( min-width: 768px ) {
  .grid-col--2 { display: block; } /* show column 2 */
}

@media ( min-width: 1200px ) {
  .grid-col--3 { display: block; } /* show column 3 */
}

@media ( min-width: 1600px ) {
  .grid-col--4 { display: block; } /* show column 3 */
}

.grid-item {
  /* background: #09D; */
  margin-bottom: 20px;
}

.grid-item--a { height:  80px; }
.grid-item--b { height: 140px; }
.grid-item--c { height: 300px; }