.section-steve-jobs {
	width: calc(var(--container--width) + var(--layout--offset) * 2);
	max-width: calc(100vw - (var(--layout--padding) - var(--layout--offset)) * 2);
	margin-right: auto;
	margin-left: auto;
}

.section-steve-jobs > h2 {
	width: var(--container--width);
	margin-right: auto;
	margin-left: auto;
}

.section-steve-jobs-card {
	position: relative;
	display: grid;
	min-height: 270px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-4);
	background: color-mix(in srgb, var(--color-background-100) 58%, var(--color-background));
	overflow: hidden;
	grid-template-columns: 190px minmax(0, 1fr);
}

.section-steve-jobs-card::before {
	position: absolute;
	top: var(--spacing-8);
	right: var(--spacing-8);
	color: var(--color-border-darker);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 5rem;
	line-height: .65;
	content: "“";
	pointer-events: none;
}

.section-steve-jobs-art {
	position: relative;
	min-height: 270px;
	overflow: hidden;
}

.section-steve-jobs-art::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 28%;
	background: linear-gradient(to bottom, transparent, var(--color-background-100));
	content: "";
	pointer-events: none;
}

.section-steve-jobs-portrait {
	position: absolute;
	bottom: -17%;
	left: 50%;
	display: block;
	width: 245px;
	height: 284px;
	max-width: none;
	background-color: var(--color-contrast);
	-webkit-mask: url("../../images/steve-jobs-lineart.png") center / contain no-repeat;
	mask: url("../../images/steve-jobs-lineart.png") center / contain no-repeat;
	transform: translateX(-50%);
}

.section-steve-jobs-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: var(--spacing-9) clamp(var(--spacing-8), 5vw, var(--spacing-9));
}

.section-steve-jobs-copy blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.section-steve-jobs-copy blockquote p {
	max-width: 25ch;
	margin: 0;
	color: var(--color-contrast);
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-style: italic;
	font-weight: var(--font-medium);
	line-height: 1.12;
	letter-spacing: -.025em;
}

.section-steve-jobs-copy figcaption {
	margin-top: var(--spacing-8);
}

.section-steve-jobs-signature {
	display: block;
	width: clamp(125px, 20vw, 165px);
	height: clamp(35px, 5.6vw, 46px);
	background-color: var(--color-contrast);
	-webkit-mask: url("../../images/steve-jobs-signature.png") center / contain no-repeat;
	mask: url("../../images/steve-jobs-signature.png") center / contain no-repeat;
}

@media (width < 560px) {
	.section-steve-jobs-card {
		min-height: 240px;
		grid-template-columns: 120px minmax(0, 1fr);
	}

	.section-steve-jobs-art {
		min-height: 240px;
	}

	.section-steve-jobs-portrait {
		bottom: -8%;
		width: 175px;
		height: 203px;
	}

	.section-steve-jobs-copy {
		padding: var(--spacing-8) var(--spacing-7);
	}

	.section-steve-jobs-copy figcaption {
		margin-top: var(--spacing-7);
	}

	.section-steve-jobs-signature {
		width: 120px;
		height: 34px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.section-steve-jobs-portrait {
		transition: transform .5s cubic-bezier(.4, 0, .2, 1);
	}

	.section-steve-jobs:hover .section-steve-jobs-portrait {
		transform: translateX(-50%) scale(1.015);
	}
}