article[class=message-box]{
		font-family: inherit;
	}
	article[class=message-box] > h2{
		font-family: inherit;
	}
	article[class=message-box] > section[class=message]{
		font-family: inherit;
	}
	article[class=message-box] > section[class=message] > h2,
	article[class=message-box] > section[class=message] > p{
		font-family: inherit;
		
		color: #444;
		font-size: 1.5rem;
		white-space: pre-line;
		
	}

	article[class=message-box] h2,
	article[class=message-box] > .message > h2,
	article[class=message-box] > .message > p{
		text-align: left ;
		hyphens: auto;
		padding: var(--padding1);
	}
	.message-box > h2{
		color: #fff;
		font-size: 1.6rem;
		font-weight: bold;
		letter-spacing: 0.8rem;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
		text-transform: uppercase;
	}
	.message > h2{
		color: #444;
		font-size: 1rem;
		letter-spacing: 0.2rem;
		text-transform: uppercase;
	}
	.message > p{
		color: #444;
		font-size: 1.5rem;
		letter-spacing: 0.08rem;
	}	
	@media screen and (max-width: 479px){	
		article[class=message-box] h2,
		article[class=message-box] > .message > h2{
			line-height: 1.5;
		}
		article[class=message-box] > .message > p{
			line-height: 1.5;
		}
		.message-box > h2{
			font-size: 1rem;
		}
	}
	@media screen and (min-width: 480px){
		article[class=message-box] h2,
		article[class=message-box] > .message > h2,
		article[class=message-box] > .message > p{
			line-height: 1.5;
		}	
	}
	.message-box a, .message-box, .message-box a:hover, .message-box a:link, .message-box a:visited{
		color: inherit;
	}
	.message-box a, .message-box, .message-box a:link, .message-box a:visited{
		text-decoration: none;
	}
	.message-box a:hover{
		text-decoration: none ;
	}

	article[class=message-box]{
		background-color: none;
	}
	article[class=message-box] > .message{
		background-color: #f3f3f3;
		background-size: 8rem 8rem;
		background-position-y: center;
		color: #444;
	}
	@media screen and (min-width: 480px){
	
		.ico-depozyt_opon{
			background: left/contain content-box border-box no-repeat
				url("./ico/depozyt_opon.png") white;
		}
		.ico-kontrola{
			background: left/contain content-box border-box no-repeat
				url("./ico/kontrola.png") white;
		}
		.ico-karta_podarunkowa{
			background: left/contain content-box border-box no-repeat
			url("./ico/karta_podarunkowa.png") white;
		}
		.ico-kalendarz{
			background: left/contain content-box border-box no-repeat
			url("./ico/kalendarz.png") white;
		}
		.ico-opona_premium{
			background: left/contain content-box border-box no-repeat
			url("./ico/opona_premium.png") white;
		}
		.ico-test_drogowy{
			background: left/contain content-box border-box no-repeat
			url("./ico/test_drogowy.png") white;
		}
		.ico-wymiana_oleju_i_filtra{
			background: left/contain content-box border-box no-repeat
			url("./ico/wymiana_oleju_i_filtra.png") white;
		}
		.ico-klimatyzacja{
			background: left/contain content-box border-box no-repeat
			url("./ico/klimatyzacja.png") white;
		}
		.ico-zawieszenie{
			background: left/contain content-box border-box no-repeat
			url("./ico/zawieszenie.png") white;
		}
	}

	article[class=message-box] > .message{
		
		border: 2px solid #bbb;
		border-radius: 0.8rem;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

	}

	article[class=message-box]{
		margin: 0;
		padding: 0;
	}
	.message-box > h2, .message{
		margin: 0.5rem 0;
		padding: 0.6rem 0.8rem;
	}		
	@media screen and (max-width: 479px){
		.message-box > h2, .message{
			margin: 0.5rem 0;
			padding: 0.6rem;
		}
		.message > h2, .message > p{
			margin: 0.2rem;
		}
	}
	@media screen and (min-width: 480px){
		.ico-margin{
			margin: 0 0 0 8.8rem;
		}
	}

	@media screen and (max-width: 479px){
		.message{
			height: auto;
			min-height: 8.8rem; 
		}	
	}
	@media screen and (min-width: 480px){
		.message{
			height: auto;
			padding: var(--padding2);
			min-height: 8.8rem;
		}
	}