<div class="wrapper">
  <div class="news-item hero-item">
    <div class="thumbnail">
        <div class="image-wrapper">
           <picture>
            <!--[if IE 9]><video style="display: none;"><![endif]-->
            <source media="(max-width: 1000px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/divinity-small.jpg">
            <source media="(min-width: 1100px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/divinity-medium.png">
            <!--[if IE 9]></video><![endif]-->
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/divinity-small.jpg" alt="Divinity" class="responsive-img">
          </picture>
        </div>
        <div class="caption">
          <span class="tag">Review</span>
          <h1 class="title">Divinity: Original Sin 2 is awesome</h1>
          <span class="author">by Ren Aysha</span>
        </div> 
    </div>
  </div>
  <div class="news-item standard-item">
    <div class="thumbnail">
      <div class="image-wrapper">
        <picture>
          <!--[if IE 9]><video style="display: none;"><![endif]-->
          <source media="(max-width: 599px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/re7-chris-large.jpg">
          <source media="(min-width: 600px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/re7-chris-small.jpg">
          <!--[if IE 9]></video><![endif]-->
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/re7-chris-large.jpg" alt="Resident Evil 7" class="responsive-img">
        </picture>
      </div>
      <div class="caption">
        <span class="tag">Featured</span>
        <h1 class="title">Resident Evil 7: Scarier than ever</h1>
        <span class="author">by Ren Aysha</span>
      </div> 
    </div>
  </div>
  <div class="news-item standard-item">
    <div class="thumbnail">
      <div class="image-wrapper">
        <picture>
          <!--[if IE 9]><video style="display: none;"><![endif]-->
          <source media="(max-width: 599px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/bioshock-large.jpg">
          <source media="(min-width: 600px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/bioshock-small.jpg">
          <!--[if IE 9]></video><![endif]-->
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/bioshock-large.jpg" alt="Bioshock 2" class="responsive-img">
        </picture>
      </div>
      <div class="caption">
        <span class="tag">Guide</span>
        <h1 class="title">Bioshock 2: Tactics on killing Big Sisters</h1>
        <span class="author">by Ren Aysha</span>
      </div> 
    </div>
  </div>
  <div class="news-item standard-item">
    <div class="thumbnail">
      <div class="image-wrapper">
        <picture>
          <!--[if IE 9]><video style="display: none;"><![endif]-->
          <source media="(max-width: 1000px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/lara-small.jpg">
          <source media="(min-width: 1100px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/lara-medium.jpg">
          <!--[if IE 9]></video><![endif]-->
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/lara-small.jpg" alt="Tomb Raider" class="responsive-img">
        </picture>
      </div>
      <div class="caption">
        <span class="tag">Adventure</span>
        <h1 class="title">Tomb Raider: The reincarnation of Lara Croft</h1>
        <span class="author">by Ren Aysha</span>
      </div> 
    </div>
  </div>
  <div class="news-item standard-item">
    <div class="thumbnail">
      <div class="image-wrapper">
        <picture>
          <!--[if IE 9]><video style="display: none;"><![endif]-->
          <source media="(max-width: 1000px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/dishonored-small.jpg">
          <source media="(min-width: 1100px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/dishonored-2-medium.jpg">
          <!--[if IE 9]></video><![endif]-->
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/dishonored-small.jpg" alt="Dishonored 2" class="responsive-img">
        </picture>
      </div>
      <div class="caption">
        <span class="tag">Stealth</span>
        <h1 class="title">Dishonored 2: Creative Kills have never look so good</h1>
        <span class="author">by Ren Aysha</span>
      </div> 
    </div>
  </div>
  <div class="news-item standard-item">
    <div class="thumbnail">
      <div class="image-wrapper">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/infinite-small.jpg" alt="Bioshock Infinite" class="responsive-img">
      </div>
      <div class="caption">
        <span class="tag">First person shooter</span>
        <h1 class="title">Bioshock Infinite: Colorful instead of morbid</h1>
        <span class="author">by Ren Aysha</span>
      </div> 
    </div>
  </div>
  <div class="news-item standard-item">
    <div class="thumbnail">
      <div class="image-wrapper">
        <picture>
          <!--[if IE 9]><video style="display: none;"><![endif]-->
          <source media="(max-width: 599px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/trine-2-large.png">
          <source media="(min-width: 600px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/trine-2-small.png">
          <!--[if IE 9]></video><![endif]-->
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/trine-2-large.png" alt="Trine 2" class="responsive-img">
        </picture>
      </div>
      <div class="caption">
        <span class="tag">Review</span>
        <h1 class="title">Trine 2: Entertaining & Funny</h1>
        <span class="author">by Ren Aysha</span>
      </div> 
    </div>
  </div>
  
  <div class="news-item standard-item">
    <div class="thumbnail">
      <div class="image-wrapper">
        <picture>
          <!--[if IE 9]><video style="display: none;"><![endif]-->
          <source media="(max-width: 1000px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/wild-hunt-small.jpg">
          <source media="(min-width: 1100px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/wild-hunt-medium.jpg">
          <!--[if IE 9]></video><![endif]-->
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/wild-hunt-small.jpg" alt="Witcher 3: Wild Hunt" class="responsive-img">
        </picture>
      </div>
      <div class="caption">
        <span class="tag">Adventure</span>
        <h1 class="title">Witcher 3: Blood and Wine</h1>
        <span class="author">by Ren Aysha</span>
      </div>
    </div>
  </div>
</div>

* {
  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: 3px auto;
  font-size: 0; // inline-block hack 
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  
  @media (min-width: 728px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

.caption {
  padding: 16px;
}

.title,
.tag {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 4px;
  line-height: 1.35em;
}

.tag {
  background: #ff0052;
  padding: 4px 8px;
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
}

.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;
  }
}

.title,
.author {
  color: #333;
}

.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;
  }
  
  .news-item {
    padding: 0;
    
    @media (min-width: 1100px) {
      &:first-child,
      &:nth-child(4),
      &:nth-child(5),
      &:nth-child(8) {
        &:before,
        &:after {
          content: "";
          width: 0;
          height: 0;
          border: 0 solid transparent;
          position: absolute;
          z-index: 5;
          display: block;
        }

        &:before {
          border-right-color: #fff;
          border-width: 0 55px 55px 0;
          right: 0;
          top: 0;
        }

        &:after {
          border-right-color: #fff;
          border-width: 55px 55px 0 0;
          right: 0;
          bottom: 0;
        }
      }

      &:nth-child(4),
      &:nth-child(8) {    
        &:before {
          top: 0;
          left: 0;
          border-left-color: #fff;
          border-width: 0 0 55px 55px;
        }

        &:after {
          border-bottom: 55px solid #fff;
          border-right: 55px solid transparent;
          left: 0;
          bottom: 0;
        }
      }
    }
  }
  
  .standard-item:nth-child(2),
  .standard-item:nth-child(3),
  .standard-item:nth-child(6),
  .standard-item:nth-child(7) {
    @media (min-width: 1100px) {
      border-top: 55px solid #fff;
    }
  }
 
  .caption {
    position: static;
    margin-right: auto;
  }
  
  // media queries in order to simulate
  // polygon's layout in different widths
  // some repeated code is necessary
   @media (min-width: 1100px) {
    .hero-item,
    .standard-item:nth-child(4),
    .standard-item:nth-child(5),
    .standard-item:nth-child(8) {
      .thumbnail,
      .responsive-img,
      .image-wrapper {
        height: 100%;
      }

      .responsive-img {
        width: 100%;
      }

      .caption {
        position: absolute;
        bottom: 0;
        z-index: 3;
        bottom: 32px;
        left: 8px;
      }

      .title,
      .author {
        color: #fff;
      }
    }
  }
}