body {
	display: grid;
	gap: 0.5em;
     }

/* 2-spaltiges Layout für breitere Viewports */

@media (min-width: 30em) {
	body {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr min-content;
	     }
                         }

header,
footer {
	grid-column: 1 / -1;
	background: #17242d;
	}


header {
	background: #F1F3F4;
	background-image: url('header_bg.jpg');
	background-size: cover;
	border-color: #d5d5d5;
	display: grid;
	grid-template-columns: min-content 1fr;
       }


body {
	background: #39464f;
	margin: 0 auto;
	width: 100%;
	max-width: 60em;
	font-family: sans-serif;
     }

    .grid {
      display: grid;
      gap: 5px;
      padding: 0px;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }


.grid img {
      	width: 100%;
	max-width: 100%;
      	height: auto;
      	display: block;
      	object-fit: cover;
      	border-radius: 0px;
           }

header,
nav,
main,
article,
section,
aside,
footer {
	border-radius: 0px 0em 0.5em;
	border: 0px solid;
	padding: 0px;
       }