.hero-wrapper {
	position: relative;
	display: grid;
	align-items: center;
	overflow: hidden;

	@media (min-width: 768px) {
		min-height: clamp(20rem, 45vw, 40.625rem);
	}

	/* hidden below md */
	.header-image {
		display: none;

		@media (min-width: 768px) {
			display: block;
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}

		/* image composition is anchored right (figma: strips end at the right edge),
		   shift towards the corner as far as the text column allows */
		@media (min-width: 1400px) {
			object-position: 60% center;
		}

		@media (min-width: 2000px) {
			object-position: right center;
		}
	}

	.hero-header {
		margin-bottom: 1.875rem;
	}

	/* in flow, so the wrapper grows with long text */
	.hero-text {
		position: relative;
		z-index: 2;
		padding-top: 3rem;
		padding-bottom: 1rem;

		@media (min-width: 768px) {
			padding-bottom: 8rem;
		}

		@media (min-width: 1400px) {
			padding-top: 7.75rem;
		}

		.btn {
			margin: 0 1rem 1rem 0;
		}

		/* figma: 30px above the button row, nothing below it (buttons fit in one row from xxl) */
		@media (min-width: 1400px) {
			p:has(> .btn) {
				margin-top: 1.875rem;
				margin-bottom: 0;
			}

			.btn {
				margin-bottom: 0;
			}
		}
	}
}


/* only subpages of home page */
.outerWrapper:not(.homepage) {
	.hero-wrapper {
		.hero-text {
			padding-top: 2rem;
			padding-bottom: 1rem;

			@media (min-width: 768px) {
				padding-top: 2rem;
				padding-bottom: 1rem;
			}

			@media (min-width: 1400px) {
				padding-top: 7rem;
				padding-bottom: 2rem;
			}
		}

		@media (min-width: 768px) {
			min-height: 25rem;
		}
	}
}