.dynamic-content-header {
	position: relative;
	margin-top: 45px;
	margin-bottom: 45px;

	@media(min-width: 992px) {
		padding-top: 45px;
		padding-bottom: 45px;
	}
	@media(min-width: 1200px) {
		padding-top: 60px;
		padding-bottom: 60px;
		margin-top: 60px;
	margin-bottom: 60px;
	}

	&:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 35vw;
		height: 100%;
		background-color: var(--color-prime);
		opacity: .20;
		z-index: 10;
	}
	@media(width < 992px) {
		&:after {
			opacity: 0.10;
			height: calc(100% + 20px);
		}
	}
}

.dynamic-content-title-container {
	@media(min-width: 992px) {
		padding-top: 45px;
		padding-bottom: 45px;
	}
}

.dynamic-content-intro {
			padding-top: 30px;
		padding-bottom: 30px;

@media(min-width: 768px) {
		h2 {
		font-size: var(--f1);
	}
}
	@media(min-width: 992px) {
		padding-top: 45px;
		padding-bottom: 45px;
	}
@media(min-width: 1200px) {
			padding-top: 60px;
		padding-bottom: 60px;
			h2 {
		font-size: var(--d6);
	}
}
}


.dynamic-content-feat-img {
	position: relative;
	min-height: 380px;
	height: 100%;
	z-index: 20;

	img {
		position: absolute;
    top: 0;
    left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.dynamic-content-title-chip {
	display: inline-block;
	padding: 0.5em 0.9em;
	margin-bottom: 1em;
	border-radius: 999px;
	background-color: var(--color-prime);
	color: #fff;
	text-decoration: none;
	font-size: var(--f8);
	line-height: 1.2;

	&:hover,
	&:focus {
		background-color: #eee;
		color: #222;
	}
}