.banner-content--wrapper {
	padding: 1.5rem 0 2rem;

	&:before {
		top: -140px;
	}

	.banner--content,
	.banner--media {
		flex: 1 1 100%;
		height: max-content;
	}

	.banner--content {
		gap: 0.25rem;
		flex-wrap: wrap;
		padding: 2rem 0;
	}

	.banner--media {
		border: 0.35rem solid var(--brand-light-blush);
		&.media__image {
			max-width: 500px;
			margin: 0 auto;
			img {
				width: 100%;
			}
		}
	}

	.banner--kicker {
		flex: 1 1 100%;
		text-transform: uppercase;
		color: var(--brand-blue);
		font-weight: 400;
		font-family: var(--font__sans-serif-condensed);
		line-height: 1;
		font-size: calc(var(--font-size__base, 18px) * var(--font-factor__h5));
	}

	.banner--heading {
		flex: 1 1 100%;
		font-family: var(--font__serif);
		margin: 0;
		font-style: italic;
		padding-left: 1.25rem;
		max-width: 100%;
		width: 100%;
		font-size: calc(
			var(--font-size__base, 18px) * var(--font-factor__h3, 2)
		);
	}
}

@media screen and (min-width: 660px) {
}
@media screen and (min-width: 1000px) {
	.banner-content--wrapper {
		> .content-width.flex-row {
			flex-wrap: nowrap;
			justify-content: space-between;
		}
		.banner--content {
			flex: 1 1 calc(70% - 0.5rem);
			padding-top: 5rem;
			padding-bottom: 5rem;
			padding-right: 3rem;
			max-width: 95ch;
		}

		.banner--media {
			flex: 0 1 calc(30% - 0.5rem);
		}

		.banner--kicker {
			font-size: calc(
				var(--font-size__base, 18px) * var(--font-factor__h3, 1.3)
			);
		}

		.banner--heading {
			padding-left: 2rem;
			font-size: calc(var(--font-size__base, 18px) * 4.25);
			margin-top: 0.5rem;
		}

		&:has(.banner--kicker, .banner--heading) {
			.details--media {
				padding-top: 2rem;
			}
		}

		&:has(.media__video) {
			> .content-width.flex-row {
				align-items: center;
			}

			.banner--content {
			}

			.banner--media {
				padding-top: 0;
			}
		}
	}
}