.about {
	background: var(--color-cream);
	padding-block: 70px;
}

@media (min-width: 1024px) {
	.about {
		padding-block: var(--section-py);
	}
}

.about__panel {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-stroke);
}

@media (min-width: 1024px) {
	.about__panel {
		flex-direction: row;
	}
}

.about__media {
	aspect-ratio: 360 / 403;
	background: rgba(179, 179, 175, 0.2);
	border: 1px solid var(--color-stroke);
	margin: 0;
}

@media (min-width: 1024px) {
	.about__media {
		aspect-ratio: auto;
		flex: 0 0 663px;
		border: none;
		border-right: 1px solid var(--color-stroke);
	}
}

.about__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about__content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

@media (min-width: 1024px) {
	.about__content {
		justify-content: space-between;
	}
}

.about__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 8px 0;
}

@media (min-width: 1024px) {
	.about__text {
		padding: 42px 20px 0;
		max-width: 590px;
	}

	.about__text .h2 {
		max-width: 449px;
	}
}

.about__text .h2 {
	text-align: center;
}

@media (min-width: 1024px) {
	.about__text .h2 {
		text-align: left;
	}
}

.about__copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.about__copy p {
	color: var(--color-text-muted);
	font-size: 16px;
}

.about__highlights {
	display: flex;
	flex-direction: column;
	margin-top: 24px;
}

@media (min-width: 1024px) {
	.about__highlights {
		margin-top: 0;
	}
}

.about__highlights li {
	padding: 0 12px;
	border-top: 1px solid var(--color-stroke);
	font-size: 20px;
	color: var(--color-dark);
	display: flex;
	align-items: center;
	min-height: 64px;
}

@media (min-width: 1024px) {
	.about__highlights li {
		padding: 0 42px;
	}
}