.about-hero {
	align-items: flex-start;
	gap: 3rem;
	padding-inline: 0;
	margin-bottom: 6rem;
}

.about-hero .hero-copy {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.about-hero h2 {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--primary-color);
}

.about-hero h2 span {
	color: oklch(63.042% 0.15491 152.705); /* De kleur is donker en komt niet overeen met de variabele en de rest van de site, maar Axe labeled het als voldoende contrast */
}

.about-hero p {
	color: var(--secondary-color);
	line-height: 1.6;
}

.cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.hero-portrait {
	display: flex;
	justify-content: center;
}

.about-portrait {
	width: 320px;
	height: 320px;
	border-radius: 1rem;
	object-fit: cover;
	box-shadow:
		0 15px 45px rgba(var(--success-color-rgb), 0.25),
		var(--btn-shadow);
}

.about-basics {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.75rem;
	margin: 0.5rem 0;
	padding: 0;
}

.about-basics li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--primary-color-10);
	border-radius: 0.5rem;
	box-shadow: var(--btn-shadow);
}

.about-basics .label {
	color: var(--secondary-color);
	font-weight: 500;
}

.about-basics .value {
	color: var(--primary-color);
	font-weight: 600;
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
}

.info-card {
	border: 1px solid var(--primary-color-10);
	border-radius: 0.75rem;
	padding: 1.5rem;
	background: var(--primary-bg-color);
	box-shadow: var(--btn-shadow);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.info-card h2 {
	font-size: 1.25rem;
	margin: 0;
}

.timeline {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.timeline li {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 0.75rem;
	align-items: start;
	padding-left: 0.75rem;
	border-left: 2px solid var(--primary-color-10);
}

.timeline-year {
	font-weight: 700;
	color: var(--primary-color);
}

.timeline-content p {
	margin: 0;
	line-height: 1.5;
}

.tag-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	padding: 0;
	margin: 0;
}

.tag-list li {
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--primary-color-10);
	background: var(--secondary-bg-color);
	color: var(--primary-color);
	font-weight: 500;
	box-shadow: var(--btn-shadow);
}

@media (max-width: 900px) {
	.about-hero {
		flex-direction: column;
		align-items: center;
	}

	.about-portrait {
		width: 260px;
		height: 260px;
	}
}

@media (max-width: 600px) {
	.timeline li {
		grid-template-columns: 1fr;
		padding-left: 0.5rem;
	}

	.timeline-year {
		color: var(--secondary-color);
	}
}