Template: aspect-ratio locked Divs floating to center with outline

dabblet.css

/**
 * Template: aspect-ratio locked Divs floating to center with outline
 */
body {
	margin: 80px;
	padding: 0;
}

.image-grid {
	text-align: center;
	font-size: 0; /* removes default horizontal spacing on inline-block */
}

.image-grid > * {
	vertical-align: top; /* removes default vertical spacing on inline-block */
	display: inline-block;
}

.image-wrapper {
	width: 100%;
	max-width: 400px;
}

.image-content {
	width:100%;
	height:0;
	padding-top:66.666%; /* 3x2 aspect ratio */ 
	
	background-image: url(http://i.imgur.com/VkUpwPi.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	
	position: relative; /* necessary to keep the position: absolute contained*/
}

.image-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	
	/*background: url(http://i.imgur.com/HeYHtzI.png);*/
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 5px solid rgba(0,0,0,0.5);
}

dabblet.html

<div class="image-grid">
	<div class="image-wrapper">
		<div class="image-content">
			<div class="image-overlay"></div>
		</div>
	</div>
	<div class="image-wrapper">
		<div class="image-content">
			<div class="image-overlay"></div>
		</div>
	</div>
	<div class="image-wrapper">
		<div class="image-content">
			<div class="image-overlay"></div>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}