.home .hero h1 {
	max-width: 23ch;
	margin-bottom: 2.5rem;
	text-transform: uppercase;
}

.home .hero h1 span {
	display: block;
}

.home h2 {
	color: var(--accent);
}

.home .section-default > h2 {
	margin-top: 2rem;
	margin-bottom: 2rem;
	font-size: 1.5rem;
	text-align: center;
}

.introduction {
	max-width: 65rem;
	margin: 2rem auto;
	margin-top: 5rem;
	padding: 2rem;
	text-align: center;
	background-color: var(--primary-translucent);
}

@media(min-width: 65rem) {
	.introduction {
		border-radius: 0.5rem;
	}
}

.introduction h2 {
	margin-top: 1rem;
	padding-bottom: 0.75rem;
	font-size: 2rem;
	color: var(--primary);
	background: url(/assets/images/blue-line-after.png);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: auto;
}

.introduction-inner {
	max-width: 59rem;
	margin: 0 auto;
}

.introduction-inner p {
	font-size: 1.125rem;
	line-height: 1.45;
	text-align: left;
}

@media(min-width: 40.625em) {
	.introduction-inner p {
		columns: 2;
		column-gap: 3rem;
	}
}

.introduction-inner svg {
	margin-top: 1rem;
	opacity: 0.5;
}

.introduction-inner .dots circle {
	fill: var(--primary-dark);
}
