:root {
	--primary-bg-color: #F0F0F0;
	--primary-bg-accent: #FCEDBA;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color:#464646;
    background-color:#FFE078;
}
a:link, a:visited {
    color:#464646;
}
a:hover {
    color:#464600;
	background-color: var(--primary-bg-accent);
}
a:active {
    color:#464646;
}

.outer-grid {
    display: grid;
    grid-template-columns: 0.5rem 1fr 0.5rem;
    
}

.outer-grid > * {
    grid-column: 2 / 3;
}

.inner-grid {
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

.small-size {
   padding:2rem;
    background-color: var(--primary-bg-color);
   /* grid-column: span 2;*/
	margin-bottom: 1rem;
}

.medium-size {
   padding:2rem; 
    background-color: var(--primary-bg-accent);
    /* grid-column: span 3; */
    margin-bottom: 1rem;
}

.full-size {
    padding:2rem;
	background-color: var(--primary-bg-color);
}

.header, .footer {
	background-color: #B1B1B1;
}

.header {
    margin-bottom: 1rem;
    padding: 1rem 0 1rem 0;
}
.header .medium-size {
	background-color:var(--primary-bg-accent);	
}

.header .small-size {
	background-color:#333333;
}

.main {
	background-color:#FFE078;
}

.footer {
    
    margin-top: 1rem;
    padding: 1rem 0 1rem 0;
}
.footer .small-size, .footer .medium-size {
	background-color: var(--primary-bg-accent);
}

.test {
    background-color: #FFBDBD;
}

.small-size, .medium-size, .full-size {
	border-radius:0 50px 0 50px;
	#border: 1px solid #000;
}

.hero__image {
    max-width: 50%;
    margin: 0 auto;
}

.img__block {
		word-break:normal;
		background-size:cover;
		background-repeat: no-repeat;
		height:100%;
		}

#img__block-1 {
	background-image:url("img/zetong-li-6lOwmoquDpY-unsplash.jpg");
}
		
/* mittlere Displays */
@media (min-width: 750px) {

	.outer-grid {
		display: grid;
		grid-template-columns: 1.5rem 1fr 1.5rem;
	}
	
    .inner-grid {
		display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1rem;
    }

    .small-size,
    .medium-size {
        grid-column: span 1;
        margin-bottom: 0;
    }
    .full-size {
		grid-column: span 2;
		margin-bottom: 0;
    }
}
/* große Displays */
@media (min-width: 1000px) {

	.outer-grid {
		display: grid;
		grid-template-columns: 0.5fr 5fr 0.5fr;
	}
    .inner-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .medium-size {
        grid-column: span 2;
     }
     
     .full-size {
		grid-column: span 3;
     }

}