

.grid-container { display: grid; grid-auto-columns: 16%; grid-gap: 1px;
				  background: lightgrey; padding: 8px; margin: 0 0 1rem 0; }
.grid-container:nth-child(even) { background: #51a2db }



.item1 { grid-area: 1 / 1 / span 1 / span 6; margin-top: 0; font-size: 1rem; }
.item2 { grid-area: 3 / 1 / span 1 / span 6; text-align: right; font-size: 1rem }
.item3 { grid-area: 2 / 1 / span 1 / span 6; font-size: .8rem; }
.item4 { grid-area: 4 / 1 / span 1 / span 6; text-align: center; }
.grid-container img { width: 60% }
@media screen and (min-width: 550px) {
.item1 { grid-area: 1 / 1 / span 1 / span 4; }
.item2 { grid-area: 1 / 5 / span 1 / span 2; }
.item3 { grid-area: 2 / 1 / span 1 / span 6; }
.item4 { grid-area: 3 / 1 / span 1 / span 6; }
}
@media screen and (min-width: 900px) {
.item1 { grid-area: 1 / 1 / span 1 / span 4; font-size: 1.2rem; }
.item2 { grid-area: 1 / 5 / span 1 / span 2; font-size: 1.2rem; }
.item3 { grid-area: 2 / 1 / span 1 / span 4; font-size: 1rem; }
.item4 { grid-area: 2 / 5 / span 1 / span 2; }
.grid-container { padding: 20px; grid-gap: 10px;}
.grid-container img { width: 100% }
}
@media screen and (min-width: 1200px) {
.item1 { grid-area: 1 / 1 / span 1 / span 5; }
.item2 { grid-area: 1 / 6 / span 1 / span 1; }
.item3 { grid-area: 2 / 1 / span 1 / span 4; }
.item4 { grid-area: 2 / 5 / span 1 / span 2; }
}








.icon-link { font-size: 2rem; display: flex; align-items: center; justify-content: center; height: 174px; margin: 50px auto 100px; }
.icon-link a { color: #000; text-shadow: none; display: block }
.icon-link a:hover { color: grey; transform: none }
.icon-link.mail { height: 140px; text-align: center; background: url('https://legkonditisztitas.hu/klimatisztitas/email.jpg') center center no-repeat }
.icon-link.phone { background: url('https://legkonditisztitas.hu/klimatisztitas/telefon.jpg') center center no-repeat }






@media(max-width:1000px) {
	
	
}

@media(max-width:900px) {
	.icon-link.mail { font-size: 1.3rem; }
	.content-padding { padding: 0 10px; }
	html { font-size: 23px }
	
}

@media(max-width:800px) {
	html { font-size: 22px }
	
}

@media(max-width:600px) {
	
}

@media(max-width:550px) {
	.icon-link.mail  { font-size: 1.1rem; }
	.icon-link.phone { font-size: 1.5rem; }
}
@media(max-width:450px) {
	.icon-link.mail  { font-size: .8rem; }
	.icon-link.phone { font-size: 1.2rem; }
}

