:root {
.bangert-hero {
	position: relative;
	overflow: hidden;
	border-radius: 32px;
	min-height: 420px;
	padding: 48px;
	display: grid;
	align-items: end;
	background:
		linear-gradient(180deg, rgba(31, 31, 31, 0.26), rgba(31, 31, 31, 0.82)),
		var(--bangert-hero-image, none) center/cover no-repeat,
		var(--bp-ink);
	box-shadow: var(--bp-shadow);
}

.bangert-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(250, 175, 58, 0.18), transparent 45%),
		radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 24%);
	pointer-events: none;
}

.bangert-hero__content {
	position: relative;
	z-index: 1;
	max-width: 720px;
	color: #fff;
}

.bangert-kicker {
	display: inline-block;
	margin-bottom: 16px;
	color: var(--bp-accent);
	font: 400 clamp(2rem, 3vw, 2.5rem) / 1 "Condiment", cursive;
}

.bangert-title {
	margin: 0;
	color: #fff;
	font: 900 clamp(2.8rem, 6vw, 5rem) / 0.94 "Exo", sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bangert-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

.bangert-panel {
	padding: 36px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(14px);
	border: 1px solid var(--bp-border);
	border-radius: var(--bp-radius);
	box-shadow: var(--bp-shadow);
}

.bangert-richtext {
	font-size: 1.1rem;
	line-height: 1.75;
}

.bangert-richtext img {
	max-width: 100%;
	height: auto;
	border-radius: 20px;
	border: 1px solid var(--bp-border);
	box-shadow: 0 18px 40px rgba(31, 31, 31, 0.12);
}

.bangert-bottom-strip {
	display: grid;
	gap: 24px;
	padding: 24px 28px;
	border-radius: var(--bp-radius);
	background: linear-gradient(135deg, rgba(250, 175, 58, 0.16), rgba(255, 255, 255, 0.92));
	border: 1px solid rgba(250, 175, 58, 0.32);
}

@media (max-width: 767px) {
	.bangert-shell {
		padding-bottom: 56px;
		gap: 32px;
	}

	.bangert-hero {
		min-height: 300px;
		padding: 28px 22px;
		border-radius: 24px;
	}

	.bangert-panel {
		padding: 20px;
	}
}