.hero,
.h1,
.h2,
.h3 {
	font-family: var(--font-stack-headers);
	font-weight: var(--font-weight-light);
	line-height: var(--font-line-height-header);

	&.verticalMargin {
		margin-bottom: 10px;
		margin-top: 20px;
	}
}

.hero {
	font-size: 38px;
}

.h1 {
	font-size: 28px;
}

.h2 {
	font-size: 20px;
}

.h3 {
	font-size: 16px;
}

.h4 {
	font-family: var(--font-stack-main);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-base);

	&.verticalMargin {
		margin-bottom: 10px;
		margin-top: 10px;
	}
}

/**
 * The page header is designed to wrap a page icon/title and optional
 * right-aligned actions or additional content below the title.
 */
.pageHeader {
	--header-margin: 30px;

	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--header-margin);
	padding-top: var(--header-margin);
}

.pageTitle,
h1.pageTitle {
	align-items: center;
	display: flex;
	font-size: 28px;
	font-weight: var(--font-weight-light);
	margin: 0;

	&:not(:last-child) {
		margin-bottom: 15px;
	}

	&.isSubtle {
		color: var(--color-gray-x-light);
	}

	&.isSubtle.isReact {
		margin-right: 12px;
	}
}

.pageTitleIcon {
	color: var(--color-gray-x-light);
	margin-right: 2px;

	&.isReact {
		margin-right: 12px;
	}
}