.purple-background,
.purple-background .contentRender_name_plugins_common_button
 {
	background: var(--purple);
}

.grey-background,
.grey-background .contentRender_name_plugins_common_button
 {
	background: var(--sw-key-color);
}

.grey-background,
.purple-background {
	--color-display: var(--white);

	padding: var(--space-4) 0px;
	margin: 0 0 var(--widget-margin-bottom);
}

.grey-background .video-player,
.purple-background .video-player {
	padding: var(--space-4) 0;
}

.grey-background .video-player .title,
.purple-background .video-player .title {
	font-family: var(--font-body-bold);
	font-size: var(--text-4xl);
	color: var(--white);
}

.grey-background .ccl-widget,
.purple-background .ccl-widget {
	--color: var(--white);
	--color-display: var(--white);
	--color-body: var(--white);
	--btn-text-color: var(--white);
	--color-display-hover: var(--white);
}

.grey-background .ccl-widget.core-imagebox .overlap-image,
.purple-background .ccl-widget.core-imagebox .overlap-image,
.grey-background .ccl-widget.core-callout-tiles .overlap-image,
.purple-background .ccl-widget.core-callout-tiles .overlap-image {
	--color-display: var(--white);
}

.grey-background .ccl-widget .widget-header,
.purple-background .ccl-widget .widget-header {
	--color: var(--white);
	--text-color: var(--white);
}

.grey-background .ccl-widget .slide .slide-footer,
.purple-background .ccl-widget .slide .slide-footer {
	--color-hover: var(--white);
}

.grey-background .contentRender_name_plugins_core_textbox,
.purple-background .contentRender_name_plugins_core_textbox,
.grey-background .contentRender_name_plugins_core_textbox a,
.purple-background .contentRender_name_plugins_core_textbox a,
.grey-background .sub-heading h2,
.purple-background  .sub-heading h2 {
    color: var(--white);
}

.purple-background .sub-heading h2 {
    color: var(--white);
}

.purple-background .core-cards .slides,
.grey-background .core-cards .slides {
    padding-bottom: 0px;
}

.grey-background .panel-accordion .accordion-item.active > button,
.grey-background .panel-accordion .accordion-item > button {
    color: var(--white);
    background-color: var(--sw-key-color);
}

.purple-background .panel-accordion .accordion-item.active > button,
.purple-background .panel-accordion .accordion-item > button {
    color: var(--white);
    background-color: var(--purple);
}

@media (min-width: 40em) {
	.purple-background .video-player,
	.grey-background .video-player {
		padding: var(--space-12);
	}

	.purple-background .video-player .title,
	.grey-background .video-player .title {
		font-size: var(--text-6xl);
	}
}