@font-face{
	font-family: "Cormorant Garamond";
	src: url("/fonts/cormorant-garamond-bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face{
	font-family: "Cormorant Garamond";
	src: url("/fonts/cormorant-garamond-bold-italic.woff2") format("woff2");
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

h1{
	font-family: "Cormorant Garamond";
	text-align: center;
	font-weight: bold;
	font-size: 4rem;
	margin: 2rem 0;
}

h2{
	color: #392845;
}

p.subheader{
	text-align: center;
	font-size: 1.4rem;
	line-height: 2.5;
}

p.subheader em{
	font-size: 1.25em;
	font-style: normal;
}

p.subheader em span{
	font-style: normal;
}

strong.highlight{
	/* See <https://stackoverflow.com/a/64127605>. */
	background: transparent;
	background-image: linear-gradient(to right, rgba(255, 225, 0, 0.1), rgba(255, 225, 0, 0.7) 4%, rgba(255, 225, 0, 0.3));
	border-radius: 0.8em 0.3em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	margin: 0 -0.4em;
	padding: 0.1em 0.4em;
}

.signup{
	text-align: center;
	margin: 2rem auto;
}

.signup .button{
	font-size: 2rem;
}

main > section + section{
	margin-top: 6rem;
}

main > section:last-of-type h2{
	text-align: center;
	margin-bottom: 6rem;
}

.image-block{
	display: grid;
	gap: 2rem;
}

.image-block.left{
	grid-template-columns: 20rem 1fr;
}

.image-block.right{
	grid-template-columns: 1fr 20rem;
}

.image-block > img{
	max-width: 100%;
/*	border-radius: 1rem;
	border: 2px solid #222;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);*/
}

.image-block h2{
	grid-column: 1 / span 2;
	margin: 0;
}