@font-face {
	font-family: 'Amatic SC';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('/fonts/Amatic_SC/AmaticSC-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype');
}

.info-area {
	background-color: #fff;
	/* Keep it centered after we hit max width (set below) */
	margin-inline: max(8%, calc((100vw - 1300px) / 2));
	margin-block-start: -2rem;
	position: relative;
	max-width: 1300px;
}

.info-area h2, .info-area h3, .info-area h4 {
	color: var(--sunrise-5);
}

.info-area .sub-header {
	color: var(--sunrise-4);
	display: block;
	font-family: 'Amatic SC', 'Oswald', sans-serif;
}

.info-area h2, .info-area h3, .info-area .sub-header {
	font-size: 3rem;
}

.info-area h2, .info-area h3, .info-area p {
	text-align: start;
	margin: 0 1rem;
}

.info-area p {
	color: black;
	font-family: 'Lato', 'Oswald', sans-serif;
}

.info-area-grid > div {
	display: grid;
	grid-template-rows: 1fr;
}

.info-area-grid > div:nth-of-type(odd) {
	grid-template-columns: 2fr 3fr;
	align-items: center;
}

.info-area-grid > div:nth-of-type(even) {
	grid-template-columns: 3fr 2fr;
	align-items: center;
}

@media (min-width: 1002px) {
	.info-area h2 .sub-header {
		margin-inline-start: 5vw;
	}
	
	.info-area-grid > div img {
		margin-block-start: -15%;
	}
}

@media (min-width: 843px) {
	.info-area-grid > div:nth-of-type(odd) img {
		margin-inline-start: -10%;
	}

	.info-area-grid > div:nth-of-type(even) img {
		position: relative;
		right: -10%;
	}

	/* Markup with two images currently requires that the image */
	/* and text flip places on either mobile or desktop */
	.info-area-grid > div:nth-of-type(even) div:first-child {
		grid-column: 2;
		grid-row: 1;
	}

	.info-area-grid > div:nth-of-type(even) div:nth-of-type(2) {
		grid-column: 1;
		grid-row: 1;
	}
}

@media (max-width: 843px) {
	.info-area-grid > div {
		grid-template-columns: 1fr !important;
	}

	.desktop-img {
		display: none;
	}
	
	.mobile-img {
		display: block !important;
	}

	.info-area h2, .info-area h3, .info-area .sub-header {
		font-size: 2.5rem;
	}
}

@media (max-width: 435px) {
	.info-area h2:has(.sub-header), .info-area h3, .testimonial p {
		text-align: center !important;
	}

	.testimonial {
		align-items: start !important;
	}
}

@media (max-width: 310px) {
	.info-area {
		margin-inline: 0;
	}

	.testimonial img  {
		right: 2px !important;
	}
}

.testimonial {
	display: grid;
	align-items: center;
	justify-items: end;
	margin-block: 1em;
}

.testimonial p  {
	text-align: end;
}

.testimonial p:nth-of-type(odd)  {
	text-transform: uppercase;
	color: var(--green-2);
	font-weight: bold;
}

.testimonial p:nth-of-type(even)  {
	color: #C62801; /* sunrise-5, but just barely darker to meet accessibility standards */
	font-weight: bold;
}

.testimonial > div {
	z-index: 3;
	margin-inline: 13%
}

.testimonial > div, .testimonial img {
	grid-row: 1;
	grid-column: 1;
}

.testimonial picture {
	display: contents;
}

.testimonial img  {
	width: 40%;
	position: relative;
	right: -5%;
}

@media (max-width: 616px) {
	.testimonial > div {
		margin-inline-start: 0;
	}
}

.call-to-action h2, .call-to-action h3, .call-to-action p {
	text-align: center;
}

.call-to-action .steps {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1em;
	margin-inline: 1em;
	margin-block: 3em;
}

.step {
	background-color: #f4f4f4;
	border-radius: var(--round-corners);
	box-shadow: 0 0 4px 0 #666; 
	padding-block: 1em;
	position: relative;
}

.step::before {
	background-color: #fff;
	color: var(--sunrise-5);
	content: attr(data-step);
	border: 4px dashed var(--green-1);
	border-radius: 100%;
	display: grid;
	align-content: center;
	justify-content: center;
	font-size: 2.5rem;
	font-family: 'Vitesse', 'serif';
	font-weight: bold;
	padding: 0.2em;
	position: absolute;
	top: -2rem;
	left: calc(50% - 0.8em); /* magic number. Some awful mix of padding, font-weight, and the set width below */
	height: 1em;
	width: 1em;
}

.step h3 {
	font-size: 1.5rem;
	margin-block-start: 1.5rem;
}

@media (max-width: 750px) {
	.call-to-action .steps {
		grid-template-columns: 1fr;
	}

	.call-to-action .step {
		margin-block: 1rem;
	}
}