<div class="card">
	<span class="more"></span>
	<picture class="card__image">
		<img src="http://lorempixel.com/400/200/fashion/3/" alt="Portfolio Item 1: Image" />
	</picture>
	<div class="card__content">
		<span class="card__title">Various projects from late 2016 to early 2017</span>
		<ul class="card__meta">
			<li class="likes">
				326
			</li>
			<li class="views">
				1256
			</li>
		</ul>
	</div>
</div>
<div class="card">
	<span class="more"></span>
	<picture class="card__image">
		<img src="http://lorempixel.com/400/200/fashion/5/" alt="Portfolio Item 2: Image" />
	</picture>
	<div class="card__content">
		<span class="card__title">Papier Bullet</span>
		<ul class="card__meta">
			<li class="likes">
				168
			</li>
			<li class="views">
				42
			</li>
		</ul>
	</div>
</div>
<div class="card">
	<span class="more"></span>
	<picture class="card__image">
		<img src="http://lorempixel.com/400/200/fashion/1/" alt="Portfolio Item 3: Image" />
	</picture>
	<div class="card__content">
		<span class="card__title">The logic of the local. Norwegian and Polish design</span>
		<ul class="card__meta">
			<li class="likes">
				3264
			</li>
			<li class="views">
				15
			</li>
		</ul>
	</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
	box-sizing: border-box;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 1.42;
	background: rgba(242, 242, 242, 1);
}

.card {
	position: relative;
	float: left;
	width: 286px;
	overflow: hidden;
	margin-top: 16px;
	margin-left: 8px;
	margin-right: 8px;
	
	background: rgba(254, 254, 254, 1);
	border: rgba(11, 11, 11, 0.48);
	border-radius: 8px;
	box-shadow: 0 2px 2px rgba(11, 11, 11, 0.28);
}
.card__image {
	display: block;
	width: 100%;
	height: 168px;
	overflow: hidden;
}
.card__image > img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.card__title {
	padding: 8px;
	display: block;
	font-size: 1.16rem;
	height: 72px;
	overflow: hidden;
}
.card__meta {
	list-style: none;
	
	position: relative;
	margin: 0;
	padding: 8px;
	
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	align-items: center;
	justify-content: space-between;
	
	background: rgba(11, 11, 11, 0.04);
	border-top: 1px solid rgba(11, 11, 11, 0.16);
	color: rgba(11, 11, 11, 0.68);
}
.card__meta > li.likes::after {
	content: "\f004";
	font-family: FontAwesome;
}
.card__meta > li.views::after {
	content: "\f06e";
	font-family: FontAwesome;
}
.more::after {
	position: absolute;
	display: block;
	top: 8px;
	right: 16px;
	
	color: rgba(242, 242, 242, 1);
}
.more::after {
	content: "\f142";
	font-family: FontAwesome;
	font-size: 2rem;
}