.background-wrapper {
	grid-column: screen;
	display: grid;
	grid-template-columns: subgrid;
	--vertical-padding: 16px;

	padding: var(--vertical-padding) 0;

	& > * {
		grid-column: content;
	}

	&.background-wrapper--grow-height {
		min-height: 80vh;
		align-content: center;
	}

	&.background-wrapper--variant1 {
		background-color: var(--color-brand-accent);
		--color-brand-text-bg: var(--color-brand-accent);
		color: var(--color-brand-text-on-accent);
		--color-brand-text-fg: var(--color-brand-text-on-accent);
	}

	&.background-wrapper--variant2 {
		background-color: var(--color-brand-accent2);
		--color-brand-text-bg: var(--color-brand-accent2);
		color: var(--color-brand-text-on-accent2);
		--color-brand-text-fg: var(--color-brand-text-on-accent2);
	}
}