@import url("https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css");
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,500;1,300;1,500&display=swap');

body {
	font-family: 'Barlow', sans-serif;
	font-size: 2rem;
	padding: 1rem;
}

a {
	color: black;
}

hr {
	display: block;
	border: none;
}

@media screen and (max-width: 700px) {
	hr {
		display: none;
	}
}

header {
	margin-bottom: 3rem;
}

header a {
	display: inline-block;
	margin-right: 2rem;
	color: black;
	text-decoration: none;
}

main {
	font-size: 1.2rem
}

main > * {
	margin-bottom: 3rem;
}

main h1 {
	font-size: 2rem
}

main p {
	max-width: 700px;
}

main img {
	display: block;
	max-width: 700px;
}

aside {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 1rem;
}

aside a {
	display: block;
	vertical-align: top;
	margin-bottom: 2rem;
	color: black;
	text-decoration: none;
}

aside a img {
	width: 100%;
}

aside span {
	display: block;
}

aside i {
	font-size: 1.2rem;
	font-style: normal;
}

article {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	margin-bottom: 3rem;
	font-size: 1.2rem;
}

article h1 {
	font-size: 2rem;
	max-width: 700px;
	margin-bottom: 1rem;
}

article p {
	max-width: 700px;
}

article b {
	font-size: 110%;
}

@media screen and (max-width: 700px) {
	article {
		grid-template-columns: 1fr;
	}
}