.header {
	background-image:
		linear-gradient(165deg, rgba(40, 39, 39, 0.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.8) 0%,
			rgba(40, 135, 221, 0.8) 50.48%,
			rgba(172, 116, 249, 0.8) 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;
}