/* Founder. Figma 2187:43724 desktop (480 text | 64 gap | 480 photo, centred), 2196:47745 mobile (photo first). */

.founder__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 64px;
}

.founder__content,
.founder__figure {
	flex: 0 1 480px;
	min-width: 0;
}

.founder__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.founder__title { font: var(--f-header-xl); color: var(--c-text-dark); }

.founder__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.founder__text { font: var(--f-body-s); color: var(--c-text-dark); }
.founder__text > * + * { margin-top: 21px; }

/* Photo with the quote card overlapping its bottom edge. */
.founder__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.founder__photo {
	width: 100%;
	aspect-ratio: 480 / 357;
	border-radius: var(--r-l);
	overflow: hidden;
	background: var(--c-text-dark);
}

/* quote/founder */
.founder__quote {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: calc(100% - 16px);
	margin-top: -44px;
	padding: 16px;
	border-radius: var(--r-m);
	background: var(--c-secondary);
	color: var(--c-text-dark);
}

.founder__mark {
	width: 30px;
	height: 24px;
	color: var(--c-primary);
}

.founder__mark--open { transform: rotate(180deg); }
.founder__mark--close { align-self: flex-end; }

.founder__quote-text { font: var(--f-subtitle-l); }
.founder__author { font: var(--f-subtitle-s); text-align: right; }

@media (max-width: 1023px) {
	.founder__inner { gap: 32px; }
}

@media (max-width: 767px) {
	.founder__inner {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 24px;
	}

	.founder__content,
	.founder__figure { flex: none; }

	.founder__content { gap: 16px; }
	.founder__title { font: var(--f-header-l); }
	.founder__quote { margin-top: -40px; }
}