@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
html, body{
	margin: 10px 5 0 5;
	padding: 0;
	background-color: #408080;
	font-family: 'Roboto', sans-serif;
	color: White;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item1 {
	grid-area: headder;
	background-color: #220701;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item2 {
	grid-area: left;
	background-color: #ffff79;
	padding: 6px;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: black;
}
.item3 {
	grid-area: main;
	background-color: #ffff79;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	color: black;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
}
.item4 {
	grid-area: right;
	background-color: #ffff79;
	padding: 6px;
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	color: White;
}

  .grid-container-html{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    'main main main main main main';
  grid-gap: 10px;
  background-color: #0080d2;
  }
 
img{
	max-width: 100%;
	height: auto;
}

h1{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (42 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: red;
}
h2{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (32 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: black;
}

h3{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (28 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	color: black;
}
a{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: #FDFF4D;
	color: black;
	display: block;
	margin: 3px;
	padding: 3px;
}
a.vorschau{
	font-family: 'Roboto', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	text-align: center;
	text-decoration: none;
	background-color: #FDFF4D;
	color: black;
	display: block;
	margin: 3px;
	padding: 3px;
	width: 5%;
	float: left;
}
.halbe-breite{
	float: left;
	width: 45%;
}
.clear{
	clear: both;
}

@media screen and (max-width: 900px) {

 .grid-container-html{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    'main main main main main main';
  grid-gap: 10px;
  background-color: #0080d2;
  }
 a.vorschau{
 width: 20%;
 
 }
}

@media screen and (max-width: 500px) {
html, body{
	margin-left: 2px;
}

  .grid-container-html{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
     'main main main main main main';
  grid-gap: 2px;
  background-color: #0080d2;
  }
  .item3 {
  	padding: 2px;
  }

}