/* CSS Document */
/* Her følger test af Grid til lay-out:*/

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(30px, auto); /*søjlehøjden sættes til min 30px og ellers tilpasse sig til indholdet*/
  column-gap: 5px;
  font-size: calc(7px + 1vw); /*Skal ses sammen med @media nedenfor. Tilsammen rimelig tilpasning af font-størrelserne?*/
  /*font-size: 1em;*/
  padding:5px;
  /*grid-auto-rows: minmax(30px, auto); Dette gør søjlehøjden flexibel ud over 30px, hvilket ikke er noget problem med layoutet, hvor søjlerne er placeret forskudt for hinanden!*/
}

.item-a,.item-b, .item-c, .item-d, .item-e {
	background-color: #FFFCF0;
	border: 2px solid #FFE563;
	border-radius: 5px;
	padding: 3px;
}
.item-a{
	grid-column: 1 / span 4;
	grid-row-start: 1;
	grid-row-end: span 4;
}
.item-b{
	grid-column:1 / span 4;
	grid-row-start: 7; 
	grid-row-end: span 4;
}
.item-c{
	grid-column:5 / span 4;
	grid-row-start: 3; 
	grid-row-end: span 4;
}
.item-d{
	grid-column:9/ span 4;
	grid-row-start: 1; 
	grid-row-end: span 4;
}
.item-e{
	grid-column:9 / span 4;
	grid-row-start: 7; 
	grid-row-end: span 4;
}
/* flg media query styrer i > 700px skærmbredder:*/
@media only screen and (min-width: 700px)  {
	.wrapper {
	font-size: 1em; /*1em* - ved stor skærm fastholdes standard skriftstørrelse*/
	}
	}