* {box-sizing: border-box;}

body {margin: 0;}

.container > div:nth-child(1) {background-color: #96ceb4;}
.container > div:nth-child(2) {background-color: #ff6f69;}
.container > div:nth-child(3) {background-color: #88d8b0;}

/* Following code borrowed from: https://codepen.io/pksml/pen/qJOaXp */

.block {
	text-align: center;
	background: #c0c0c0;
	border: #a0a0a0 solid 1px;
	margin: 20px;
}
 
.block:before {
	/*content: '\200B';*/
	content: '';
	margin-left: -0.25em;
	display: inline-block;
	height: 100%; 
	vertical-align: middle;
}
 
.centered {
	display: inline-block;
	vertical-align: middle;
	/*width: 95vmin;*/
	/*padding: 10px 15px;*/
	border: #a0a0a0 solid 1px;
	background: #f5f5f5;
}

/* Above code borrowed from: https://codepen.io/pksml/pen/qJOaXp */

/* Compatibility: https://autoprefixer.github.io/ */
.container {
	display: -webkit-box;
	display: -ms-flexbox;
	-ms-flex-wrap: wrap;
	-ms-flex-pack: distribute;

	border: 5px solid #ffcc5c;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	max-width: 800px;
	margin: 10px auto;
}

/* For Safari - to mimic space-evenly - https://stackoverflow.com/a/47535338 - ONLY works for a single row*/
/* Works w/ .container -->  justify-content: space-between; */
.container:before, .container:after {/*content: '';display: block;width: 2px;*/}

.container > div {
	padding: 5px;
	text-align: center;
	/*font-size: 2em;*/
	color: #ffeead;
	/*width: 300px;*/
	margin: 2px;
}

div.img {
	line-height: 0;
	border: 0px solid red;
	margin: 0px auto;
	display: table-cell;
}

.vcenter {justify-content: center; display: flex; flex-direction: column;}

.abox{
	max-width: 350px;
	/*max-height: 450px;*/
	width: 45vmin;
	/*height: 45vmin;*/
	/*overflow: hidden;*/ /* For IE 11 */
	border-radius: 10px;
}

.img {
	max-width: 300px;
	max-height: 300px;
	width: 40vmin;
	height: 40vmin;
}

.img img {
	border: 1px solid blue; 
	max-width: 100%; 
	max-height: 100%; 
	margin: 0px auto;
}

/* Responsive style here - adjust .abox & .img*/

/*

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

	*** For phone - portrait

	*** For phone - landscape

	*** For desktop

*/

@media only screen 
	and (min-aspect-ratio: 7/5)
	and (orientation: landscape)
	{
		.abox{
			max-width: 300px;
			/*max-height: 300px;*/
			width: 45vw;
			/*height: 45vmin;*/
		}

		.img {
			max-width: 280px;
			max-height: 280px;
			width: 40vw;
			height: 40vw;
		}
	}

@media only screen 
	and (min-aspect-ratio: 10/5)
	and (orientation: landscape)
	{
		.abox{
			max-width: 300px;
			/*max-height: 300px;*/
			width: 75vh;
			/*height: 45vmin;*/
		}

		.img {
			max-width: 280px;
			max-height: 280px;
			width: 70vh;
			height: 70vh;
		}
	}