* {
    box-sizing: border-box;
}


h1 {
    display: inline-block;
    margin: 0;
}

.wrapper {
    margin: 2rem 0;
}
.wrapper > *:first-child {
    margin-top: 0;
}
.wrapper > *:last-child {
    margin-bottom: 0;
}

.featuredartist, .artist {
    margin: 0 -1rem;
    padding: 0 1rem;
	padding-bottom: 1rem;
    
    background-color: lightgray;
}
.featuredartist > *:first-child, .artist > *:first-child {
	margin-top: 0;
}
.featuredartist > *:last-child, .artist > *:last-child {
	margin-bottom: 0;
}

.artistportrait {
    margin: 0 -1rem;
    
    background: url(placeholder.png) no-repeat gray;
	background-size: 100% 100%;
    text-align: center;
}
.featuredartist .artistportrait {padding-top: 100%;}
.artist .artistportrait {padding-top: 100%;}
#awp2 > * {
        margin: 0;
}
#awp2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
}

body {
    margin: 0;
}


header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	margin: auto;
	max-width: 12in;
}
.logodiv {
    padding: 1rem;
    
    background-color: lightgreen;
}
.logo {
    display: inline-block;
    margin-right: 1rem;
    width: 100px;
    height: 100px;
    
    background: green;
    
    text-align: center;
    line-height: 100px;
}
nav {
    background-color: lightgreen;
}
nav ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
}
nav ul li {
	margin: 0;
    border: 1px solid green;
    padding: 0.5rem;
    
    list-style: none;
    text-align: center;
}
.headerbg {
	background: lightgreen;
}


body {
    background-color: lightgreen;
}
main {
	margin: auto;
	max-width: 12in;
    padding: 1rem;
    background-color: white;
}
main > *:first-child {
    margin-top: 0;
}
main > *:last-child {
    margin-bottom: 0;
}
.mainbg {
	background-color: green;
}


footer {
	margin: auto;
	max-width: 12in;
    padding: 1rem;
    
    background-color: lightgreen;
}
footer p {
    margin-top: 0;
}
.footerbg {
	background: lightgreen;
}

@media only screen and (min-width: 6in) {
    nav ul {
        display: flex;
    }
	.featuredartist .artistportrait {padding-top: 66%;}
	#awp2 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 1rem;
	}
}

@media only screen and (min-width: 8in) {
	#awp1 > * {
		margin: 0;
	}
	
	#awp1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 1rem;
	}
	#awp2 {
		grid-template-columns: repeat(6, 1fr);
	}
}