.bh-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.bh-main {
	flex: 1 0 auto;
}

.bh-container {
	margin-inline: auto;
	max-width: var(--bh-width-wide);
	padding-inline: var(--bh-page-gutter);
	width: 100%;
}

.bh-container--content {
	max-width: calc(var(--bh-width-content) + (2 * var(--bh-page-gutter)));
}

.bh-container--small {
	max-width: calc(var(--bh-width-small) + (2 * var(--bh-page-gutter)));
}

.bh-container--full {
	max-width: none;
}

.bh-section {
	padding-block: var(--bh-section-space);
}

.bh-section--surface {
	background: var(--bh-color-surface);
}

.bh-section--dark {
	background: var(--bh-color-navy-deep);
	color: var(--bh-color-white);
}

.bh-section--dark :where(h1, h2, h3, h4, a) {
	color: inherit;
}

.bh-grid {
	display: grid;
	gap: var(--bh-grid-gap);
	grid-template-columns: minmax(0, 1fr);
}

.bh-content-area {
	margin-inline: auto;
	max-width: var(--bh-width-content);
	width: 100%;
}

.bh-content-area > * + * {
	margin-block-start: var(--bh-space-5);
}

.bh-content-area > .alignwide {
	margin-inline: max(calc((var(--bh-width-content) - var(--bh-width-small)) / 2), calc(-1 * var(--bh-page-gutter)));
	max-width: var(--bh-width-small);
	width: auto;
}

.bh-content-area > .alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

@media (min-width: 48rem) {
	.bh-grid--2,
	.bh-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64.0625rem) {
	.bh-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}