<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 728px) {
.wrapper {
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, transparent), color-stop(0, black));
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;
vertical-align: top;
font-size: 16px;
padding: 2px;
position: relative;
}
.hero-item,
.standard-item {
width: 50%;
}
@media (min-width: 728px) {
.hero-item,
.standard-item {
width: 25%;
}
}
/* For browsers with grid */
@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) {
.news-item:first-child:before, .news-item:first-child:after, .news-item:nth-child(4):before, .news-item:nth-child(4):after, .news-item:nth-child(5):before, .news-item:nth-child(5):after, .news-item:nth-child(8):before, .news-item:nth-child(8):after {
content: "";
width: 0;
height: 0;
border: 0 solid transparent;
position: absolute;
z-index: 5;
display: block;
}
.news-item:first-child:before, .news-item:nth-child(4):before, .news-item:nth-child(5):before, .news-item:nth-child(8):before {
border-right-color: #fff;
border-width: 0 55px 55px 0;
right: 0;
top: 0;
}
.news-item:first-child:after, .news-item:nth-child(4):after, .news-item:nth-child(5):after, .news-item:nth-child(8):after {
border-right-color: #fff;
border-width: 55px 55px 0 0;
right: 0;
bottom: 0;
}
.news-item:nth-child(4):before, .news-item:nth-child(8):before {
top: 0;
left: 0;
border-left-color: #fff;
border-width: 0 0 55px 55px;
}
.news-item:nth-child(4):after, .news-item:nth-child(8):after {
border-bottom: 55px solid #fff;
border-right: 55px solid transparent;
left: 0;
bottom: 0;
}
}
@media (min-width: 1100px) {
.standard-item:nth-child(2),
.standard-item:nth-child(3),
.standard-item:nth-child(6),
.standard-item:nth-child(7) {
border-top: 55px solid #fff;
}
}
.caption {
position: static;
margin-right: auto;
}
@media (min-width: 1100px) {
.hero-item .thumbnail,
.hero-item .responsive-img,
.hero-item .image-wrapper,
.standard-item:nth-child(4) .thumbnail,
.standard-item:nth-child(4) .responsive-img,
.standard-item:nth-child(4) .image-wrapper,
.standard-item:nth-child(5) .thumbnail,
.standard-item:nth-child(5) .responsive-img,
.standard-item:nth-child(5) .image-wrapper,
.standard-item:nth-child(8) .thumbnail,
.standard-item:nth-child(8) .responsive-img,
.standard-item:nth-child(8) .image-wrapper {
height: 100%;
}
.hero-item .responsive-img,
.standard-item:nth-child(4) .responsive-img,
.standard-item:nth-child(5) .responsive-img,
.standard-item:nth-child(8) .responsive-img {
width: 100%;
}
.hero-item .caption,
.standard-item:nth-child(4) .caption,
.standard-item:nth-child(5) .caption,
.standard-item:nth-child(8) .caption {
position: absolute;
bottom: 0;
z-index: 3;
bottom: 32px;
left: 8px;
}
.hero-item .title,
.hero-item .author,
.standard-item:nth-child(4) .title,
.standard-item:nth-child(4) .author,
.standard-item:nth-child(5) .title,
.standard-item:nth-child(5) .author,
.standard-item:nth-child(8) .title,
.standard-item:nth-child(8) .author {
color: #fff;
}
}
}
