html, body {
	/*margin: 10px 10px 100px;*/
	/*padding: 0;*/
	font-family: sans-serif;
	color: #333;
}
.intro {
	float: left;
	padding-right: 1em;
}
.intro + figure {
	float: right;
}
h3 strong {
	display: inline-block;
}
figure {
	margin: 0;
	float: left;
	display: table; /* wraps text inside */
}
section figure {
	width: 33.3%;
	margin: 0;
	box-sizing: border-box;
	border: solid 5px white;
	background: url(checkerboard.png);
}
@media (max-width: 550px) {
	.intro + figure {
		float: left;
	}
	section figure {
		width: 100%;
	}
}

section img {
	width: 100%;
	height: 200px;
}
figcaption {
	padding: 0.2em;
	text-align: left;
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.8);
	color: #FFF;
}
a {
	color: inherit;
}
code {
	font-size: 1.2em;
}

h1 {
	font-weight: 300;
	clear: both;
}

img {
	display: block;
}

.of-not-supported button {
	font-size: 3em;
	padding: 0.5em;
}

section {
	padding-top: 2em;
	margin-top: 1em;
	clear: both;
}
section figure {
	min-width: 160px;
	text-align: center;
}

.OF-fill {
	object-fit: fill;
	font-family: 'object-fit: fill';
}

.OF-contain {
	object-fit: contain;
	font-family: 'object-fit: contain';
}

.OF-cover {
	object-fit: cover;
	font-family: 'object-fit: cover';
}
.OF-cover-op {
	object-fit: cover;
	object-position: center 80%;
	font-family: 'object-fit: cover; object-position: center 80%';
}

.OF-none {
	object-fit: none;
	font-family: 'object-fit: none';
}

.OF-scaleDown {
	object-fit: scale-down;
	font-family: 'object-fit: scale-down';
}
.object-position {
	max-height: 33vw;
}
@media (max-width: 700px) {
	.xs--OF-cover {
		object-fit: cover;
		font-family: 'object-fit: cover';
	}
	.caption-cover {
		border-left: 5px solid green;
		padding-left: 5px;
	}
}
@media not all and (max-width: 700px) {
	.caption-contain {
		border-left: 5px solid green;
		padding-left: 5px;
	}
}