@charset "utf-8";

body {
	/*...*/
	display: grid;
	grid-gap: 0.1vw;
	grid-template-columns: 6.5rem 1fr;
	grid-template-rows: 6rem 1fr 3rem;
	grid-template-areas: "header  header"
						 "sidebar content"
						 "footer footer";
	background: #12458c;
	margin: 0rem;
	padding: 0px;
	font-family: -apple-system, BlinkMacSystemFont,
	"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

header {
	display: grid;
	align-items: center;
	justify-items: center;
	text-transform: uppercase;
	padding-top: 1px;
	padding-bottom: 1px;
	color: #fff;
	border-style: solid;
	border-width: 2px;
	grid-area: header;
	/*...*/
}
aside {
	display: grid;
	align-items: center;
	justify-items: center;
	color: #fff;
	border-width: 2px;
	border-style: solid;
	float: left;
	width: 6.3rem;
	grid-area: sidebar;
	/*...*/
}
footer {
	display: grid;
	align-items: center;
	justify-items: center;
	color: #fff;
	border-width: 2px;
	border-style: solid;
	clear: both;
	grid-area: footer;
	/*...*/
}
main {
	/*...*/
	display: grid;
	grid-gap: 0.1vw;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	grid-template-rows: repeat(auto-fill, minmax(12rem, 1fr));
	float: right;
	width: calc(100% - 7.2rem);
	padding: 5px;
	background: hsl(240, 100%, 50%);
	grid-area: content;
	/*...*/
}
main > article {
	display: grid;
	align-items: center;
	justify-items: center;
	background: hsl(240, 100%, 50%);
	background-image: url('https://source.unsplash.com/daily');
	color: hsl(240, 0%, 100%);
	border-width: 5px;
}

@supports (display: grid) {
	main {
		width: auto;
	}
}

@supports (display: grid) {
	main, aside {
		width: auto;
	}
}

main article:nth-child(2) {
	grid-column: 2/span 4;
	grid-row: 1/span 2;
}

@media all and (max-width: 575px) {
	body {
		grid-template-rows: 6rem 1fr 5.5rem 5.5rem;
		grid-template-columns: 1fr;
		grid-template-areas: 
		"header"
		"content"
		"sidebar"
		"header"oter";
	}
}