.contentbanner-layout {
	--cb-bg: #ffffff;
	--cb-heading: var(--pk-color-primary);
	--cb-text: inherit;
	--cb-btn-bg: var(--pk-color-primary);
	--cb-btn-bg-hover: var(--pk-color-secondary);
	--cb-btn-text: #ffffff;
	--cb-btn-text-hover: #ffffff;
}

.contentbanner-layout .pk-row-content {
    align-items: center;
	border-radius: var(--pk-button-radius);
    overflow: clip;
	border: 1px solid #E6E6E6;
	background-color: var(--cb-bg);
}

.contentbanner-layout .text-col {
	padding: 3rem;
	color: var(--cb-text);
}

.contentbanner-layout .text-col .pk-heading{
	color: var(--cb-heading);
}

.contentbanner-layout .text-col .pk-text {
	color: var(--cb-text);
}

.contentbanner-layout .text-col .pk-button {
	background-color: var(--cb-btn-bg);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.contentbanner-layout .text-col .pk-button::after{
	background-color: var(--cb-btn-text);
}

.contentbanner-layout .text-col .pk-button span {
	color: var(--cb-btn-text);
}

.contentbanner-layout .text-col .pk-button:hover {
	background-color: var(--cb-btn-bg-hover);
}

.contentbanner-layout .text-col .pk-button:hover:after{
	background-color: var(--cb-btn-text-hover);
}

.contentbanner-layout .text-col .pk-button:hover span {
	color: var(--cb-btn-text-hover);
}

.contentbanner-layout .image-col {
	background-size: cover;
    align-self: stretch;
}

@media screen and (max-width: 767px) {
	.contentbanner-layout .text-col {
		padding: var(--pk-site-gutter);
	}
	.contentbanner-layout .image-col {
		min-height: 300px;
	}
}