/* ============================================================
	Figure
============================================================ */
.photos {
	list-style: none;
	counter-reset: picture;
	margin: 2em 0;
}
.photos li {
	margin-left: 0;
	}
	.photos li:before {
		content: counter(picture);
		counter-increment: picture;
		color: #999;
		font-size: 1.3125em; /* 21px */
		line-height: 1.1429; /* 24px */
		width: 1.7143em; /* 36px */
		float: left;
		display: block;
	}
.photos figure {
	overflow: hidden;
}
.photos figure img {
	display: block;
}
.photos figcaption h3 {
	font-size:1.3334em;
	margin-top: 0.5em;
}
.photos figcaption small {
	color:rgba(0,0,0,0.5);
	font-size:0.75em;
	line-height:1.3333;
	text-transform:uppercase;
	margin-top:1em;
}
@media screen and (min-width:36em) {
	.photos li {
		margin-left: -2.25em;
	}
	.has-js .photos figure {
		background-color: #222;
	}
	.has-js .photos figure img {
		width: 100%;
	}
	.has-js .photos figcaption {
		display: block;
		margin: 0;
		padding: 3%;
		width: 94%;
	}
	.has-js .photos figcaption h3 {
		color: #fff;
		margin-top: 0;
	}
	.has-js .photos figcaption p {
		color: #fff;
	}
	.has-js .photos figcaption p:last-child {
		margin-bottom: 0;
	}
	.has-js .photos figcaption small {
		color: rgba(255,255,255,0.5);
	}
}