.df-image-overlap {
	background: #FFFFFF;

	--df-image-overlap-heading-color: #111111;
	--df-image-overlap-text-color: #242424;
	--df-image-overlap-image-bg: #E5E7EB;
	--df-image-overlap-image-height: 20rem;
	--df-image-overlap-bottom-gap: var(--df-space-8);
	padding-block: 0;
	margin-block: var(--df-space-16);
}

.df-image-overlap__top {
	padding: 0 1.5625rem;

	background-image: var(--df-image-overlap-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;

	padding-block: var(--df-space-10) calc((var(--df-image-overlap-image-height) / 2) + var(--df-image-overlap-bottom-gap));
}

.df-image-overlap__top-inner {
	display: flex;
	flex-direction: column;

	gap: var(--df-space-6);
}

.df-image-overlap__heading {
	max-width: 36rem;

	margin: 0;

	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--df-image-overlap-heading-color);
	letter-spacing: -.01em;
}

.df-image-overlap__columns {
	display: grid;

	grid-template-columns: minmax(0, 1fr);

	margin: 0;

	gap: var(--df-space-5);
}

.df-image-overlap__column {
	margin: 0;

	font-size: 1rem;
	line-height: 1.6;
	color: var(--df-image-overlap-text-color);
}

.df-image-overlap__image-row {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--df-image-overlap-image-height) / -2);
}

.df-image-overlap__figure {
	height: var(--df-image-overlap-image-height);
	max-height: var(--df-image-overlap-image-height);
	padding: 0;

	margin: 0;

	overflow: hidden;
}

.df-image-overlap__figure img,
.df-image-overlap__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

@media (min-width: 61.3125rem) {
	.df-image-overlap {
		--df-image-overlap-image-height: 33.125rem;
		--df-image-overlap-bottom-gap: var(--df-space-16);
	}

	.df-image-overlap__top {
		padding-top: 6.25rem;
		padding-right: 0;
		padding-left: 0;
	}

	.df-image-overlap__top-inner {
		gap: var(--df-space-8);
	}

	.df-image-overlap__heading {
		max-width: 40rem;

		font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	}

	.df-image-overlap__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: var(--df-space-10);
	}

	.df-image-overlap__column {
		line-height: 1.65;
	}
}