.wi-home__hero {
	display: grid;
	gap: 20px;
	height: 296px;
	margin-top: var(--wi-space-hero-top);
	padding: 0;
}

.wi-home__hero h1 {
	color: var(--wp--preset--color--primary);
	font-size: var(--wi-font-display-size);
	letter-spacing: 0;
	line-height: var(--wi-line-display);
	max-width: 1400px;
}

.wi-home__intro {
	font-size: 24px;
	font-weight: 400;
	line-height: 42px;
	max-width: 808px;
}

.wi-home__intro p:last-child,
.wi-home__statement p:last-child {
	margin-bottom: 0;
}

.wi-home__quote {
	/* Height is defined by the padding alone - no fixed box. */
	margin-bottom: var(--wi-space-quote-bottom);
	margin-top: var(--wi-space-quote-top);
	padding: 0;
	position: relative;
}

.wi-home__quote blockquote {
	background: var(--wp--preset--color--surface);
	box-sizing: border-box;
	margin: 0;
	height: 460px;
	padding: 128px 95px 90px 100px;
}

.wi-home__quote blockquote p {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: var(--wi-font-quote-size);
	font-style: italic;
	font-weight: 700;
	line-height: var(--wi-line-quote);
	margin: 0;
	max-width: 1205px;
}

.wi-home__quote cite {
	color: var(--wi-teal-light);
	display: block;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 42px;
	margin-top: 40px;
	text-align: right;
}

.wi-home__quote-mark {
	color: var(--wp--preset--color--primary-dark);
	font-family: "Cormorant", serif;
	font-size: 0;
	left: -140px;
	line-height: 0;
	position: absolute;
	top: 133px;
	z-index: 1;
}

.wi-home__quote-mark::before {
	content: "\"";
	font-size: var(--wi-font-quote-mark-size);
	font-style: italic;
	font-weight: 400;
	line-height: 0;
}

.wi-home__statement {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--wi-space-statement-bottom);
}

.wi-home__statement > div {
	font-size: 24px;
	line-height: 42px;
	max-width: 779px;
	margin-right: 24px;
}

.wi-home__columns {
	display: grid;
	grid-auto-rows: 410px;
	gap: var(--wi-space-columns-gap-row) var(--wi-space-columns-gap-col);
	margin-bottom: var(--wi-space-columns-bottom);
}

body #page .wi-home__column h2,
.wi-home__column h2 {
	border-bottom: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	font-size: var(--wi-heading-card);
	letter-spacing: 2px;
	line-height: var(--wi-heading-card-line);
	margin-bottom: 40px;
	padding-bottom: 32px;
}

.wi-home__column div {
	font-size: 20px;
	/* Hyphenation is wanted. `auto` lets the browser break on German rules using
	   the document lang; the literal hyphens typed into the Figma text
	   (`unab-hängige`, `Zusam- menarbeit`) are then unnecessary in the content. */
	-webkit-hyphens: auto;
	hyphens: auto;
	line-height: 30px;
	overflow-wrap: normal;
	word-break: normal;
}

.wi-home__column div p {
	margin: 0;
}

@media (max-width: 767.98px) {
	.wi-home__column:first-child > div {
		min-height: 336px;
	}
}

.wi-home__cta {
	padding-inline: 0;
}

/* md: 768px */
@media (min-width: 768px) {
	.wi-home__hero {
		align-items: start;
		grid-template-columns: 1fr;
	}

	.wi-home__intro {
		align-self: end;
		justify-self: end;
	}

	.wi-home__quote {
		padding-inline: 0;
	}

	.wi-home__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	.wi-home__cta {
		padding-inline: 0;
	}
}

@media (min-width: 1024px) {
	.wi-home__columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1900px) {
	.wi-home__columns {
		grid-auto-rows: 410px;
	}
}

@media (min-width: 768px) and (max-width: 1899px) {
	.wi-home__hero {
		height: auto;
		margin-top: clamp(60px, 5.3vw, 100px);
		min-height: clamp(240px, 25vw, 296px);
	}

	.wi-home__hero h1 {
		font-size: clamp(56px, 5.3vw, 75px);
		line-height: 1;
	}

	.wi-home__intro,
	.wi-home__statement > div {
		font-size: clamp(18px, 1.5vw, 24px);
		line-height: 1.75;
	}

	.wi-home__quote {
		height: auto;
		margin-block: clamp(100px, 10vw, 150px) clamp(60px, 6.4vw, 100px);
	}

	.wi-home__quote blockquote {
		height: auto;
		min-height: clamp(320px, 29vw, 460px);
		padding: clamp(78px, 8vw, 128px) clamp(52px, 6vw, 100px);
	}

	.wi-home__quote blockquote p {
		font-size: clamp(48px, 5vw, 72px);
		line-height: 1;
	}

	.wi-home__quote-mark {
		left: clamp(-90px, -6vw, -60px);
	}

	.wi-home__statement {
		margin-bottom: clamp(80px, 7.5vw, 120px);
	}

	.wi-home__columns {
		gap: clamp(56px, 5.6vw, 80px) clamp(24px, 2.5vw, 40px);
		margin-bottom: clamp(130px, 12.7vw, 200px);
	}

	body #page .wi-home__column h2,
	.wi-home__column h2 {
		font-size: clamp(30px, 3.3vw, 48px);
		line-height: 1.2;
		padding-bottom: clamp(18px, 2vw, 32px);
	}

	.wi-home__column div {
		font-size: clamp(16px, 1.3vw, 20px);
		line-height: 1.5;
	}
}

@media (max-width: 767.98px) {
	.wi-home__hero {
		gap: 40px;
		height: 436px;
		margin-top: 100px;
		padding-bottom: 0;
	}

	.wi-home__hero > *,
	.wi-home__column {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	body.home #page .wi-home__hero h1 {
		font-size: 48px !important;
		letter-spacing: 0;
		line-height: 48px !important;
	}

	.wi-home__intro {
		font-size: 24px;
		line-height: 42px;
	}

	.wi-home__quote {
		height: 402px;
		margin-block: 100px;
	}

	.wi-home__quote blockquote {
		height: 402px;
		padding: 120px 32px 0;
	}

	body.home #page .wi-home__quote blockquote p {
		font-size: 40px !important;
		letter-spacing: 0;
		line-height: 40px !important;
		max-width: 299px;
	}

	.wi-home__quote cite {
		font-size: 20px;
		line-height: 42px;
		margin-top: 40px;
	}

	.wi-home__quote-mark {
		left: 32px;
		top: 96px;
	}

	.wi-home__quote-mark::before {
		font-size: 160px;
	}

	.wi-home__statement {
		margin-bottom: 100px;
	}

	.wi-home__statement > div {
		font-size: 24px;
		line-height: 42px;
		margin-right: 0;
	}

	.wi-home__columns {
		gap: 40px;
		grid-auto-rows: auto;
		margin-bottom: 150px;
	}

	body.home #page .wi-home__column h2 {
		font-size: 40px !important;
		letter-spacing: 0;
		line-height: 48.44px !important;
	}
}