[data-breakout] {
	--col-breakout: var(--col-bg);
	position: relative;
	background: var(--col-breakout);
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 1rem calc(50vw - 50%);
}

[data-breakout="bg"] {
	--col-breakout: var(--col-bg);
}

[data-breakout="bg2"] {
	--col-breakout: var(--col-bg2);
}

[data-breakout="bg3"] {
	--col-breakout: var(--col-bg3);
}

[data-breakout="accent"] {
	--col-breakout: var(--col-accent);
	color: var(--col-accent-contrast);
}

[data-breakout="accent2"] {
	--col-breakout: var(--col-accent2);
	color: var(--col-accent-contrast);
}

[data-breakout="fg"] {
	--col-breakout: var(--col-fg);
	color: var(--col-bg);
}

[data-breakout="fg2"] {
	--col-breakout: var(--col-fg2);
	color: var(--col-bg);
}