<section class="news">
	
	<article class="post">
		<div class="media" style="background-image: url('https://source.unsplash.com/wOj5odhDOZ0');"></div>
		<div class="caption">
			<h1 class="title">Distinctio sunt similique quos error, solestiae illo placeat</h1>
			<div class="author">by John Doe</div>
		</div>
	</article>
	
	<article class="post">
		<div class="media" style="background-image: url('https://source.unsplash.com/45FJgZMXCK8');"></div>
		<div class="caption">
			<h1 class="title">Explicabo ducimus ipsam vel nostrum nesciunt colestiae distinctio</h1>
			<div class="author">by John Doe</div>
		</div>
	</article>
	
	<article class="post">
		<div class="media" style="background-image: url('https://source.unsplash.com/-sQ4FsomXEs');"></div>
		<div class="caption">
			<h1 class="title">Aliquam nisi labore beatae at optio rerum illum</h1>
			<div class="author">by John Doe</div>
		</div>
	</article>
	
	<article class="post">
		<div class="media" style="background-image: url('https://source.unsplash.com/QEob0Fp4rdg');"></div>
		<div class="caption">
			<h1 class="title">Eligendi distinctio laborum sapiente voluptatem quidem quas numquam</h1>
			<div class="author">by John Doe</div>
		</div>
	</article>
	
	<article class="post">
		<div class="media" style="background-image: url('https://source.unsplash.com/KqVHRmHVwwM');"></div>
		<div class="caption">
			<h1 class="title">Veniam veritatis eligendi cumque porro modi quos vero repellendus ipsam aperiam</h1>
			<div class="author">by John Doe</div>
		</div>
	</article>
	
	<article class="post">
		<div class="media" style="background-image: url('https://source.unsplash.com/6IxGFVz0wPM');"></div>
		<div class="caption">
			<h1 class="title">Nisi repudiandae hic iste ratione accusamus vero accusantium</h1>
			<div class="author">by John Doe</div>
		</div>
	</article>
	
	<article class="post">
		<div class="media" style="background-image: url('https://source.unsplash.com/laetDTa6Ihc');"></div>
		<div class="caption">
			<h1 class="title">Quasi laudantium molestias aliquam adipisci dolores recusandae ab</h1>
			<div class="author">by John Doe</div>
		</div>
	</article>
	
	<article class="post">
		<div class="media" style="background-image: url('https://source.unsplash.com/h4bBVo_CpqQ');"></div>
		<div class="caption">
			<h1 class="title">Aut laudantium placeat quos inventore quibusdam magnam</h1>
			<div class="author">by John Doe</div>
		</div>
	</article>
	
</section>
@mixin scrim($direction: to top, $color: #000, $alpha-from: 1, $alpha-to: 0) {
	$diff: $alpha-from - $alpha-to;
	background: linear-gradient(
		$direction,
		rgba($color, $alpha-from) 0%,
		rgba($color, $alpha-from - $diff*0.7) 50%,
		rgba($color, $alpha-from - $diff*0.85) 65%,
		rgba($color, $alpha-from - $diff*0.925) 75.5%,
		rgba($color, $alpha-from - $diff*0.963) 82.85%,
		rgba($color, $alpha-from - $diff*0.981) 88%,
		rgba($color, $alpha-to) 100%
	);
}

* {
	box-sizing: border-box;
	font-family: Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Lora, serif;
}

body {
	margin: 0;
}

.news {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 350px;
	grid-auto-flow: dense;
	grid-gap: 1em;
	max-width: 1600px;
	margin: 0 auto;
	padding: 1em;

	.post {
		display: flex;
		flex-flow: column nowrap;

		&:nth-child(1) { grid-column-end: span 9; }
		&:nth-child(2) { grid-column-end: span 3; }
		&:nth-child(3) { grid-column-end: span 3; }
		&:nth-child(4) { grid-column-end: span 6; }
		&:nth-child(5) { grid-column-end: span 3; }
		&:nth-child(6) { grid-column-end: span 6; }
		&:nth-child(7) { grid-column-end: span 3; }
		&:nth-child(8) { grid-column-end: span 3; }

		.media {
			display: block;
			flex: 1 1 auto;
			background-size: cover;
			background-position: center;
			background-color: #ddd;
		}

		.caption {
			padding: .5em 0 0;
			.title { margin: 0 0 .5em; }
			.author { font-style: italic;	}
		}

		&.overlaid {
			position: relative;

			.caption {
				z-index: 2;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				color: #fff;
				padding: 1em;
			}

			&::after {
				z-index: 1;
				content: '';
				position: absolute;
				top: 0; bottom: 0;
				left: 0; right: 0;
				@include scrim();
			}
		}
	}
}

@media (max-width: 1200px) {
	.news .post {
		&:nth-child(1) { grid-column-end: span 12; }
		&:nth-child(2) { grid-column-end: span 4; }
		&:nth-child(3) { grid-column-end: span 4; }
		&:nth-child(4) { grid-column-end: span 4; }
		&:nth-child(5) { grid-column-end: span 12; }
		&:nth-child(6) { grid-column-end: span 4; }
		&:nth-child(7) { grid-column-end: span 4; }
		&:nth-child(8) { grid-column-end: span 4; }
	}
}

@media (max-width: 900px) {
	.news .post {
		&:nth-child(1) { grid-column-end: span 12; }
		&:nth-child(2) { grid-column-end: span 6; }
		&:nth-child(3) { grid-column-end: span 6; }
		&:nth-child(4) { grid-column-end: span 12; }
		&:nth-child(5) { grid-column-end: span 6; }
		&:nth-child(6) { grid-column-end: span 6; }
		&:nth-child(7) { grid-column-end: span 6; }
		&:nth-child(8) { grid-column-end: span 6; }
	}
}

@media (max-width: 600px) {
	.news .post {
		grid-column-end: span 12 !important;
	}
}
View Compiled
$(document).ready(function() {

	var large = 1200,
			medium  = 900,
			small   = 600,
			highlighted  = 'overlaid';

	function changeNewsArticleClass() {
		var width = $(window).outerWidth();
		
		$('.news .post').removeClass(highlighted);
		
		if (width > large) {
			$('.news .post:nth-child(1), .news .post:nth-child(4), .news .post:nth-child(6)').addClass(highlighted);
		}
		else if (width > medium && width <= large) {
			$('.news .post:nth-child(1), .news .post:nth-child(5)').addClass(highlighted);
		}
		else if (width > small && width <= medium) {
			$('.news .post:nth-child(1), .news .post:nth-child(4)').addClass(highlighted);
		}
		else if (width <= small) {
			$('.news .post').addClass(highlighted);
		}
	}

	changeNewsArticleClass();

	$(window).on('load resize', function() {
		changeNewsArticleClass();
	});

});

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i
  2. https://fonts.googleapis.com/css?family=Lora:400,700

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js