/* * {
	border: solid 1px grey;
} */

.wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas:
		"header header header"
		"content content sidebar"
		"footer  footer  footer";
}

header, footer {
	text-align: center;
}

header {
	grid-area: header;
}

main {
	grid-area: content;
}

aside {
	grid-area: sidebar;
}

footer {
	grid-area: footer;
}

@media only screen and (max-width: 550px) {
	.wrapper {
		grid-template-areas:
			"header header header"
			"content content content"
			"sidebar sidebar sidebar"
			"footer  footer  footer";
	}

	img {
		max-width: 100%;
	}
}