* {
  box-sizing: border-box;
  position: relative;
}

body {
  margin: 0 3px;
  font-family: 'Lato', sans-serif;
}

img {
  display: block;
  object-fit: cover;
}

.wrapper {
  max-width: 1440px;
  margin: 5px auto;
  font-size: 0; // inline-block hack 
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: 
      "hero med1"
      "small1 small2"
      "small3 small4"
      "small5 small6";
  
  @media (min-width: 728px) {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas: 
     "small1  small2  hero hero"
      "med1   med1     hero hero"
      "med1   med1     hero hero"
      "small3 small4   small5 small6";
  }

  @media (min-width: 1100px) {
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(4, 1fr);
     grid-template-areas: 
      "small1  small2  hero hero hero"
      "med1   med1     hero hero hero"
      "med1   med1     hero hero hero"
      "small3 small4   small5 small6 small7";
  }
}


.hero-item {
  grid-area: hero;
}

.standard-item:nth-child(2) {
  grid-area: med1; 
}

.standard-item:nth-child(3) {
  grid-area: small5;
}

.standard-item:nth-child(4) {
  grid-area: small1;
}

.standard-item:nth-child(5) {
  grid-area: small2;
}

.standard-item:nth-child(6) {
  grid-area: small3;
}

.standard-item:nth-child(7) {
  grid-area: small4;
}

.standard-item:nth-child(8) {
  grid-area: small6;
}

.standard-item:nth-child(9) {
  grid-area: small7;
  display: none;
  
  @media (min-width: 1100px) {
    display: block;
  }
}


/* Styles related to the thumbnails */
.responsive-img {
  max-width: 100%;
  height: auto;
  width: 100%;
}

.caption {
  padding: 16px;
}
.thumbnail {
  color: #fff;
  position: relative;
  overflow: hidden;
}

.image-wrapper {
  &:after {
    background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(1, rgba(0,0,0,0.0)), /* Top */
      color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
    );
    bottom: 0;
    content: "";
    left: 0;
    opacity: .5;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }
}

.news-item {
  display: inline-block; // display: inline-block for non supported browsers
  vertical-align: top;
  font-size: 16px;
  padding: 2px;
  position: relative;
}


// Classes under media queries will have a mix of percentage
// based width and grid columns. Grid code will be ignored for
// unsupported browsers and percentage is used. Percentage width
// will be overwritten by supported browsers when grid is used.
.hero-item,
.standard-item { 
  width: 50%;
  
  @media (min-width: 728px) {
    width: 25%;
  }
}

/* For browsers with grid */
// Cleaner code and no more percentage based width
@supports (display: grid) {
  .wrapper > *,
  .standard-item:nth-child(4),
  .standard-item:nth-child(5),
  .standard-item:nth-child(6) {
    margin: 0;
    width: auto;
  }
  
  // ensure image extends to the entire grid height
  .hero-item,
  .standard-item:nth-child(2) {
    .responsive-img,
    .image-wrapper,
    .thumbnail {
      height: 100%;
    }
    
    .image-wrapper,
    img {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }
}