.header {
	background-image:
		linear-gradient(165deg, rgba(40, 39, 39, .5) 13%, transparent 180%),
		var(--banner-image);
	background-position:
		center,
		center;
	background-size:
		auto,
		cover;
	background-repeat: no-repeat;
	background-color: var(--purple-500);
	display: flex;
	flex-direction: column;
	padding-block-end: var(--spacing-40);

	.single-members &,
	.single & {
		padding-block-end: 0;
	}

	@media (width > 1000px) {
		/*max-height: 80vh;*/
	}

	@media (width > 1200px) {
		padding-block-end: var(--spacing-60);
	}
}

.header--image {
	background-image:
		url(../../images/circle.svg),
		linear-gradient(90deg, rgba(62, 29, 102, 0.80) 0%, rgba(40, 135, 221, 0.80) 50.48%, rgba(172, 116, 249, 0.80) 100%),
		var(--banner-image);
	background-size:
		33% auto,
		auto,
		cover;
	background-position:
		left bottom,
		center,
		center;
	background-repeat:
		no-repeat;
}

.header--home {
	gap: 0;
	padding-block-end: 0;
	background-image:
		url(../../images/circle-hero-home.svg),
		linear-gradient(83deg, #4C2280 5.27%, #6C4D94 39.31%, #486FC2 96.95%);
	background-size:
		50% auto,
		auto;
	background-position:
		top center,
		center;
	background-repeat:
		no-repeat;
	overflow: clip;
}