* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #fffaf0;
  background: #f8f8ff;
  background: #f5f5f5;
}

.grid-item {
  background: #0f0;
  border: 1px solid black;
  margin-bottom: 2vw;

  position: relative;
}

.grid-item a {
  background: #f00;
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

.grid-box-layer {
  display: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; 
  height: 3em;
  background: linear-gradient(0deg,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.5) 50%,
    rgba(0,0,0,0.0) 100%);
}

.grid-box-text {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
}

.grid-sizer,
.grid-item {
  width: 30%;
}
.gutter-sizer {
  width: 2%;
}
.grid-item-2w {
  width: 62%;
}
.grid-item-3w {
  width: 94%;
}
.grid-item-2h {
  height: 200%;
}
.grid-item-3h {
  height: 300%;
}


@media only screen and ( max-width: 640px )
{
  .grid-item {
    width: 100%;
  }
}