@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
{
  .grid-item {
    width: 100% !important;
  }
  .logo{
    height: 20% !important;
    width: 20% !important;
  }
}

* { box-sizing: border-box; }

/* force scrollbar */
html {
  overflow-y: scroll;
}


body {
  font-family: sans-serif;
}

/* ---- grid ---- */

.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
  border: 5px solid white;
}

.grid-item {
  float: left;
}

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

.grid-item--hero { width: 100%; }
.grid-item--sidekick { width: 66%; }

.content {
  width: 80%;
  margin: 0 auto;
}

.intro {
  height: 25%;
  padding-top: 5%;
}

.roboto {
  font-family: 'Roboto Condensed', sans-serif;
}

.logo {
  height: 10%;
  width: 8%;
  padding-top: 20px;
  padding-bottom: 50px;
  display: block;
  margin: 0 auto;
}

.inverted {
  filter: invert(100%);
}