.banner {
	position: relative;
	grid-gap: var(--gap);

	padding: clamp(var(--i4), 5vw, var(--i-56));
	background-color: var(--background);
	border-radius: var(--bdrs-xl);
	z-index: 1;
}

.banner_content .title {
	color: var(--decorative);
}

.banner_content .richText {
	color: var(--decorative-70);
}

.banner_content .k-button {
	--btn-min-width: 260px;
	margin-top: calc(var(--i2) - var(--i3));
}

.banner .image {
	flex-shrink: 0;
	max-width: 328px;
	margin-inline: auto;
}

@media only screen and (min-width: 1200px) {
	.banner .image {
		margin-right: 20px;
	}
}

@media only screen and (min-width: 901px) {
	.banner:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;

		width: 100%;
		background-color: var(--primary);
		mask-image: url('banner.svg');
		mask-repeat: no-repeat;
		mask-position: center right;
		mask-size: auto 100%;
		z-index: -1;
	}

	.banner_content {
		--content-gap: var(--i3);

		max-width: 704px;
	}
}

@media only screen and (max-width: 900px) {
	.banner {
		align-items: stretch;
		flex-direction: column;
	}

	.banner_content {
		display: contents;
	}

	.banner_content .k-button {
		order: 1;
	}
}