.content-grid {
	max-width: 1200px;
	display: block;
	margin: 0 auto;
	overflow:hidden;
	text-align: center;
	padding: 10px;
}

.content-grid a{
	width: 100%;
	height: 100%;
	display: inline-block;
}
.content-grid-element-content {
	visibility: visible;
	display: inline;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0,0,0,0.5);
	color: #fff;
	padding: 10px;
	opacity: 0;
	transition: opacity .5s ease-in-out;
	text-align: center;
}

.content-grid-element {
	overflow: hidden;
	position: relative;
	display: inline-block;
	border: 1px solid #C4C5CD;
	transition: border .5s ease-in-out;
}

.content-grid-element:hover {
	border: 1px solid black;
	transition: border .5s ease-in-out;
}

.content-grid-element:hover .content-grid-element-content {
	opacity: 1;
	transition: opacity .5s ease-in-out;
}

.content-grid-element:hover  img{
	transform: scale(1.2);
	transition: transform .5s;
}


.content-grid-element-content div {
	position: absolute;
	top: 0; right: 0; left:0; bottom:0;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

.content-grid-element img{
	transform: scale(1.0);
	transition: transform .5s;
	width: 100%;
	height: 100%;
	display: inline;
}


/* --- media queries -------------------------------------------------------- */
@media all and (min-width: 1200px) {
	.content-grid-element[class*="ratio3-4"] { width: 370px; height: calc(370px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 370px; height: calc(370px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 370px; height: calc(370px/16*9)}
}

@media all and (max-width: 1200px) {
	.content-grid-element[class*="ratio3-4"] { width: 365px; height: calc(365px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 365px; height: calc(365px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 365px; height: calc(365px/16*9)}
}

@media all and (max-width: 1150px) {
	.content-grid-element[class*="ratio3-4"] { width: 350px; height: calc(350px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 350px; height: calc(350px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 350px; height: calc(350px/16*9)}
}

@media all and (max-width: 1100px) {
	.content-grid-element[class*="ratio3-4"] { width: 328px; height: calc(328px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 328px; height: calc(328px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 328px; height: calc(328px/16*9)}
}

@media all and (max-width: 1050px) {
	.content-grid-element[class*="ratio3-4"] { width: 310px; height: calc(310px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 310px; height: calc(310px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 310px; height: calc(310px/16*9)}
}

@media all and (max-width: 1000px) {
	.content-grid-element[class*="ratio3-4"] { width: 295px; height: calc(295px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 295px; height: calc(295px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 295px; height: calc(295px/16*9)}
}

@media all and (max-width: 950px) {
	.content-grid-element[class*="ratio3-4"] { width: 370px; height: calc(370px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 370px; height: calc(370px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 370px; height: calc(370px/16*9)}
}

@media all and (max-width: 900px) {
	.content-grid-element[class*="ratio3-4"] { width: 370px; height: calc(370px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 370px; height: calc(370px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 370px; height: calc(370px/16*9)}
}

@media all and (max-width: 850px) {
	.content-grid-element[class*="ratio3-4"] { width: 355px; height: calc(355px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 355px; height: calc(355px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 355px; height: calc(355px/16*9)}
}

@media all and (max-width: 800px) {
	.content-grid-element[class*="ratio3-4"] { width: 335px; height: calc(335px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 335px; height: calc(335px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 335px; height: calc(335px/16*9)}
}

@media all and (max-width: 750px) {
	.content-grid-element[class*="ratio3-4"] { width: 335px; height: calc(335px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 335px; height: calc(335px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 335px; height: calc(335px/16*9)}
}

@media all and (max-width: 725px) {
	.content-grid-element[class*="ratio3-4"] { width: 370px; height: calc(370px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 370px; height: calc(370px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 370px; height: calc(370px/16*9)}
}


@media all and (max-width: 700px) {
	.content-grid-element[class*="ratio3-4"] { width: 370px; height: calc(370px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 370px; height: calc(370px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 370px; height: calc(370px/16*9)}
}

@media all and (max-width: 650px) {
	.content-grid-element[class*="ratio3-4"] { width: 370px; height: calc(370px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 370px; height: calc(370px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 370px; height: calc(370px/16*9)}
}

@media all and (max-width: 600px) {
	.content-grid-element[class*="ratio3-4"] { width: 370px; height: calc(370px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 370px; height: calc(370px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 370px; height: calc(370px/16*9)}
}

@media all and (max-width: 550px) {
	.content-grid-element[class*="ratio3-4"] { width: 370px; height: calc(370px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 370px; height: calc(370px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 370px; height: calc(370px/16*9)}
}

@media all and (max-width: 500px) {
	.content-grid-element[class*="ratio3-4"] { width: 370px; height: calc(370px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 370px; height: calc(370px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 370px; height: calc(370px/16*9)}
}

@media all and (max-width: 450px) {
	.content-grid-element[class*="ratio3-4"] { width: 370px; height: calc(370px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 370px; height: calc(370px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 370px; height: calc(370px/16*9)}
}

@media all and (max-width: 400px) {
	.content-grid-element[class*="ratio3-4"] { width: 320px; height: calc(320px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 320px; height: calc(320px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 320px; height: calc(320px/16*9)}
}

@media all and (max-width: 350px) {
	.content-grid-element[class*="ratio3-4"] { width: 270px; height: calc(270px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 270px; height: calc(270px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 270px; height: calc(270px/16*9)}
}

@media all and (max-width: 300px) {
	.content-grid-element[class*="ratio3-4"] { width: 220px; height: calc(220px/3*4)}
	.content-grid-element[class*="ratio4-3"] { width: 220px; height: calc(220px/4*3)}
	.content-grid-element[class*="ratio16-9"] { width: 220px; height: calc(220px/16*9)}
}




@media all and (min-width: 600px) {
	.content-grid-element div {font-size: 1.2em;}
}

@media all and (max-width: 600px) {
	.content-grid-element div {font-size: 1.2em;}
}

@media all and (max-width: 480px) {
	.content-grid-element div {font-size: 0.9em;}
}

@media all and (max-width: 400px) {
	.content-grid-element div {font-size: 0.8em;}