@media only screen and (max-width: 1550px) {
	#grid{
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 16.666vw;
}
}
@media only screen and (max-width: 1250px) {
	#grid{
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 20vw;
}

	.titleHolder{
	font-size: 1em;
	padding-top: 20px;
	padding-bottom: 10px;
	top: calc(75% - 45px);
}
	.textHolder{
	line-height: 1.4;
	font-size: .75em;
}
	.dropButt{
		z-index: 10;
	}

	#selection{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.selectCard{
		display: flex;
	}
}
@media only screen and (max-width: 950px) {
	#grid{
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 25vw;
}

	.titleHolder{
	font-size: .9em;
}
	.textHolder{
	line-height: 1.4;
	font-size: .7em;
}
	.dotHolder{
	height: 20px;
	top: calc(66.6% - 10px);
}
	.d0, .d1, .d2, .d3, .d4, .d5{
	width: 20px;
	height: 20px;
}
}

@media only screen and (max-width: 700px) {
	#grid{
	padding-top: 103px;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 33vw;
	}

	header{
		height: 100px;
	}

	#mattTitle{
		height: 66px;
	}

	#selection{
		height: 34px;
	}

	.dropButt{
		height: 34px;
	}

	.selectCard{
	font-size: .7em;
	line-height: 34px;
	padding-left: 12px;
	padding-right: 12px;
	}

	.titleHolder{
	font-size: .8em;
	padding-left: 15px;
	top: calc(75% - 40px);
}
	.textHolder{
	line-height: 1.3;
	font-size: .6em;
	padding-left: 15px;
	padding-right: 15px;
}
}

@media only screen and (max-width: 500px) {
	#grid{
	padding-top: 78px;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 50vw;
	}

	header{
		height: 75px;}

	#mattTitle{
		height: 45px;}

	#selection{
		height: 30px;}

	.dropButt{
		height: 30px;
	}

	.selectCard{
	font-size: .65em;
	line-height: 30px;
	padding-left: 10px;
	padding-right: 10px;}

	.titleHolder{
	font-size: .7em;
	padding-left: 10px;
	padding-bottom: 0px;}

	.textHolder{
	line-height: 1.4;
	font-size: .6em;
	padding-left: 10px;
	padding-right: 10px;}

}