@charset "UTF-8";
/* SHOP TEMPLATE CSS */
/* Author: Max van Doorn */

/* Grid of Items */
.shop-grid {
	margin:20px auto;
	width: 90%;
	display:grid;
	grid-template-rows:auto;
	grid-gap: 10px;
}

.shop-grid a {
	text-decoration:none;
	color:#000;
}

/* Formula to calculate breakpoints:
((80 * number of columns)+(number of gutters * grid-gap size)*(10/9))
*/
@media screen and (max-width:189px) { /* 2 Columns */
	.shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media screen and (min-width:190px) and (max-width:289px) { /* 3 Columns */
	.shop-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media screen and (min-width:290px) and (max-width:389px) { /* 4 Columns */
	.shop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media screen and (min-width:390px) and (max-width:489px) { /* 5 Columns */
	.shop-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}
@media screen and (min-width:490px) and (max-width:589px) { /* 6 Columns */
	.shop-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}
@media screen and (min-width:590px) and (max-width:689px) { /* 7 Columns */
	.shop-grid {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
}
@media screen and (min-width:690px) { /* 8 Columns */
	.shop-grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

/* Fluid item images */

.item-img {
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	margin:auto;
    cursor:pointer;
}
@media screen and (max-width:849px) {
	.item-img {
		height:0;
		width:90%;
		padding-bottom:90%;
	}
}
@media screen and (min-width:850px) {
	.item-img {
		width:80px;
		height:80px;
		padding-bottom:0;
	}
}
/* Text */
.container p {
	font-size:11pt;
	font-family: "MuseoSansRounded500", 'Arial', sans-serif;
	width:90%;
	margin:auto;
	text-align:center;
}
.item-name {
	font-family: "MuseoSansRounded700", 'Arial', sans-serif;
}
@media screen and (max-width:481px) {
	.item-name {
		font-size:8pt !important;
	}
	.item-stock {
		font-size:6pt !important;
	}
}
@media screen and (min-width:482px) {
	.item-name {
		font-size:11pt !important;
	}
	.item-stock {
		font-size:9pt !important;
	}
}