/*
	Outerwrap and Innerwrap Rules are provided
*/

.outerwrap {
	width: 100%;
	clear: both;
}

.innerwrap {
	width: 94%;
	max-width: 68.75em;
	margin: 0 auto;
}

/*
	Just a few Selectors are provided - you must write the missing ones 
*/

header div {
	padding: 1.2em 0 0 0;   /* Adds space between the top of page and top of logo */
    display: grid;
    grid-template-columns: 120px 1fr;
}

header div nav {
    align-self: end;
}

article.twocolumns {
    display: grid ;
    grid-template-columns: 1fr 2fr;

}

article.twocolumns div {
	padding: 3em 1em;   /* Adds 3em of white space to top and bottom, and 1em to the left and right sides */

}

article.right {
    grid-template-columns: 2fr 1fr;
}
article.right div {
    grid-column: 2 / -1;
}
article.right div + div {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
/* Selects the FIRST <div> after the <article> element */
article.twocolumns > div {


}

/* Selects the SECOND <div> after the <article> element */
article.twocolumns div + div {


}

section.threecolumns {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
}

section.threecolumns div {
	padding: 0 1.5em;   /* Adds space around the content of each column */
    text-align: center;
}

section.threecolumns div img {
	margin: 0 auto 1em auto;   /* Centers the images, and adds 1em of space beneath them */

}

section.fivecolumns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

section.fivecolumns div {
	text-align: center;
	padding: 2em 0;   /* Adds white space on the top and bottom of each div */

}
div.checkerboard div aside {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
}
.calcifer {
    grid-column: 5 / 6;
    grid-row: 1 / 2;
}
.zenba {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
}
.totoro {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}
.mononoke {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}
.ponyo {
    grid-column: 1 / -1;
    grid-row: 5 / 6;
    justify-self: center;
}