/* Kangaroo — page-about.php */

.kg-about {
	padding-block: 48px var(--kg-section-gap);
	display: flex;
	flex-direction: column;
	gap: 48px;
}

@media (min-width: 768px) {
	.kg-about {
		padding-block: 80px var(--kg-section-gap);
		gap: 80px;
	}
}

.kg-about-hero {
	display: flex;
	flex-direction: column;
	gap: var(--kg-space-gutter);
	align-items: center;
}

@media (min-width: 768px) {
	.kg-about-hero {
		flex-direction: row;
	}
}

.kg-about-hero__copy {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 768px) {
	.kg-about-hero__copy {
		width: 50%;
	}

	.kg-about-hero__media {
		width: 50%;
	}
}

.kg-about-hero__text {
	max-width: 60ch;
}

.kg-about-hero__media {
	width: 100%;
	height: 320px;
	border-radius: var(--kg-radius-lg);
	overflow: hidden;
	box-shadow: var(--kg-shadow-sm);
}

@media (min-width: 768px) {
	.kg-about-hero__media {
		height: 400px;
	}
}

.kg-about-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kg-values__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kg-space-gutter);
}

@media (min-width: 768px) {
	.kg-values__grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.kg-value-card {
	background: var(--kg-surface-container-lowest);
	border: 1px solid rgba(214, 195, 183, 0.3);
	border-radius: var(--kg-radius-lg);
	padding: 32px;
	box-shadow: var(--kg-shadow-card-resting);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	text-align: left;
}

.kg-value-card:hover {
	box-shadow: var(--kg-shadow-card-hover);
	transform: translateY(-4px);
}

.kg-value-card .kg-icon-circle {
	margin-bottom: 24px;
	margin-inline: 0;
}

.kg-value-card h3 {
	margin-bottom: 12px;
}