div[class=myTest]
{
	
	  display: grid;
	  grid-template-columns: repeat(3, 1fr); /*change 4, 1fr*/
	  gap: 20px;
	
}

.quickKey
{
	
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	height: 200px;
	border-radius: 20px;
	/*background-blend-mode: multiply;*/
	background-size: cover;
    background-position: center;
	cursor: pointer;
	
}

.quickKey:hover
{
	
	width: 450px;
	
}

.quickKey:hover h2
{
	
	font-size: 35px;
	
}

h2[name=title]
{
	
	display: flex;
    align-items: center;
    justify-content: center;
	margin-left: 5%;
	font-weight: bold;
	color: white !important;
	text-shadow: 3px 3px 1px #000;
	
}

div[name=shop]
{
	
	background-image: url('../myImg/quickKey/shop2.png');

}

div[name=map]
{
	
	background-image: url('../myImg/quickKey/contact.jpg');

}
div[name=contact]
{
	
	background-image: url('../myImg/quickKey/phone.jpg');

}

div[name=line]
{
	
	background-image: url('../myImg/quickKey/line2.jpg');
	
}

/*div[name=combination]
{
	
	background-image: url('../myImg/quickKey/combination.jpg');
	background-color: rgba(115, 62, 24, 0.9);
	
}

div[name=line]
{
	
	background-image: url('../myImg/quickKey/line.png');
	background-color: rgba(39, 82, 19, 0.9);
	
}*/

space
{
	
	margin-right: 5px;
	
}

/* ========= RWD 響應式 ========= */
@media (max-width: 1200px) {
	div[class=myTest] {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	div[class=myTest] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	div[class=myTest] {
		grid-template-columns: 1fr;
	}
	
	.quickKey {
		height: 150px;
	}
	
	.quickKey:hover {
		transform: none;
	}

	.quickKey:hover h2 {
		font-size: 24px;
	}
}