/*
 * Banner help. Figma banner/faq 1547:40243: purple band 1440x253, content in
 * the 720 column: header/XL white + body/XS, 24, button/M (white) 672 wide;
 * 44 top/bottom. message-question icon 220px at 50% opacity, 532 from the
 * column start, 40 above the band (clipped).
 * Mobile 1405:34503: 210 high, 32/24 padding, header/L, button full width,
 * icon 180px at x242 / y-32.
 */

.banner-help {
	overflow: hidden;
	background: var(--c-primary);
}

.banner-help__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	max-width: calc(720px + 2 * var(--gutter));
	padding-block: 44px;
}

.banner-help__icon {
	--icon-size: 220px;
	position: absolute;
	top: -40px;
	left: calc(var(--gutter) + 532px);
	color: var(--c-dark-purple);
	opacity: .5;
}

.banner-help__text {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--c-text-white);
}

.banner-help__title { font: var(--f-header-xl); }
.banner-help__desc { font: var(--f-body-xs); }

.banner-help__button {
	position: relative;
	width: min(672px, 100%);
}

@media (max-width: 767px) {
	.banner-help__inner { padding: 32px 24px; gap: 20px; }
	.banner-help__icon { --icon-size: 180px; top: -32px; left: 242px; }
	.banner-help__title { font: var(--f-header-l); }
	.banner-help__button { width: 100%; }
}