.productItem{ float: left; width: calc(25% - 80px); margin: 40px; padding-top: calc(25% - 80px); position: relative; }
.productItem .container{ transition: 0.5s; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.productItem .container a{display:block; height: 100%;}
.productItem .container picture *{ width: 100%; max-height: 100%; height: auto; object-fit:cover;}
.productItem .container h5{transition: 0.5s; font-size: 18px; width: calc(100% - 10px); position: absolute; bottom: 0; left: 0; background:#261d1e; color: #fff; text-align: center; padding: 5px; margin:0;}

.productItem picture *{height: 100%!important;}
.productItem p{text-align:center; }


.productDetail{padding: 0 0 35px 0;}

.imageContainer{float: left; width: 50%; padding: 0 0 35px 0; }
.imageContainer *{padding: 0; margin: 0;}
.imageContainer picture *{transition: 0.5s; aspect-ratio: 1/1;}
.imageContainer .imageBox-thumbs{ width: calc(33.3% - 10px); padding:5px; display: inline-block; }
.imageContainer .imageBox-thumbs:last-of-type{width:calc(33.4% - 10px);}
.imageBox-big{max-height: 600px; width: 100%; display: inline-block; }
.imageBox-thumbs picture *, .imageBox-big picture *{object-fit:cover}
.imageBox-thumbs {object-fit: cover; overflow: hidden; }
.imageContainer a{border-bottom: none!important;}

.productInfo{float: left; width: calc(50% - 25px); padding: 0 0 35px 25px;}




@media only screen and (min-width: 1099px) {
	/* Hover effects only on big screens*/
	.productItem .container:hover{transform: scale(1.1);}
	.productItem .container:hover h5{color: #df8232;}
	.productDetail .button.alt:hover{color: #df8232!important; background-color: #fff;}
	.productDetail .button:hover{color: #171717!important; background-color: #fff;}
	.imageContainer picture:hover *{transform: scale(1.1);}
}

@media only screen and (max-width: 1099px) {
	.productItem{ width: calc(50% - 40px);  margin: 20px;  padding-top: calc(50% - 40px);  }
}

@media only screen and (max-width: 500px) {
    .item h5{ font-size: 10px; max-height: 40%; overflow: hidden;}
    .productItem{ float: none; width: calc(100% - 40px); margin: 20px; padding-top: calc(100% - 40px); }
	
	.imageContainer{float: none; width:100%; padding: 0 0 25px 0; }
	.productInfo{float:none; width:100%; padding: 0 0 25px 0;}	
	.productDetail .btn {display:block; margin: 0 0 25px 0; }
}

@media only screen and (max-width: 425px) {
	.productDetail .btn {font-size: 16px;}
{