/* About */

.about { padding-top: 80px; }

.about__container {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: var(--container);
	margin: 0 auto;
}

.about__left {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 546px;
}

/* Block below 1024 would leave the h2 sitting straight on the copy. */
.about__headline {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.about__body {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 527px;
	color: var(--color-neutral-1);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

.about__right {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.about__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.about__image {
	width: 100%;
	height: 410px;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

.about__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Full-width on mobile the card runs short, so the Figma height would leave a void. */
	gap: 20px;
	min-height: 0;
	padding: 28px 22px 25px;
	border-radius: var(--radius-lg);
	background: var(--color-neutral-6);
}

.about__card--dark {
	padding-top: 22px;
	background: var(--color-primary);
}

.about__number {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--color-accent);
	font-family: var(--font-heading);
	font-size: var(--h2-size);
	line-height: var(--h2-lh);
}

.about__number img { width: 13.132px; height: 13.132px; }

.about__card--dark .about__number {
	gap: var(--space-2);
	color: var(--color-neutral-7);
}

.about__card--dark .about__number img { width: 18.45px; height: 17.886px; }

.about__card-text {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.about__card-title {
	color: var(--color-primary);
	font-size: var(--body-main-size);
	font-weight: 500;
	line-height: var(--body-main-lh);
}

.about__card-desc {
	color: var(--color-neutral-1);
	font-size: var(--body-small-size);
	line-height: 1.4;
	letter-spacing: -0.14px;
}

.about__card--dark .about__card-text { gap: var(--space-3); }
.about__card--dark .about__card-desc { color: var(--color-neutral-2); }

@media (min-width: 640px) {
	.about__right { grid-template-columns: repeat(2, minmax(0, 301px)); }
	.about__card { gap: 40px; min-height: 272px; }
}

@media (min-width: 1024px) {
	.about { padding-top: 140px; }
	.about__container {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
	}
	.about__left { gap: 93px; }
	.about__headline { gap: 50px; }
}