:root {
	--about-card-padding: 20px;
	--about-card-border-radius: 4px;
	--about-card-min-width: 300px;
	--about-card-height: 240px;
	--about-card-gap: 18px;
	--about-card-color: color-mix(in srgb, var(--textColor) 10%, transparent);
	--about-card-fill-end: color-mix(in srgb, var(--about-card-color) 35%, transparent);
}

#about {
	margin: 40px 0px 40px 0px;
	max-width: calc(100vw - 20%);
	margin: 0 auto;
	padding: 30px 0px 30px 0px;
	display: block;
}

.about-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(var(--about-card-min-width), 1fr));
	gap: var(--about-card-gap);
	align-items: stretch;
	margin-top: 24px;
}

.about-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
	gap: var(--about-card-padding);
	min-width: min(var(--about-card-min-width), 100%);
/*	height: var(--about-card-height);*/
	padding: var(--about-card-padding);
	border: 1px solid var(--about-card-color);
	border-radius: var(--about-card-border-radius);
	background: linear-gradient(135deg, var(--about-card-color) 0%, var(--about-card-fill-end) 100%);
	box-sizing: border-box;
	overflow: hidden;
}

.about-card::after {
	content: "";
	position: absolute;
	left: var(--about-card-padding);
	right: var(--about-card-padding);
	bottom: 2px;
	height: 2px;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in srgb, var(--accentColor) 96%, transparent) 72%,
		color-mix(in srgb, var(--accentColor) 84%, transparent) 82%,
		var(--accentColor) 90%,
		color-mix(in srgb, var(--accentColor) 86%, transparent) 95%,
		transparent 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 2px;
}

.about-card-media {
	display: flex;
	align-self: start;
	justify-content: center;
}

.about-card-media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	object-fit: contain;
}

.about-card-content {
	min-width: 0;
	padding: 2px 0 8px 0;
	overflow-wrap: anywhere;
	word-break: normal;
}

.about-card-content > :first-child,
.about-card-content > :first-child > :first-child {
	margin-top: 0;
}

.about-card-content > :last-child,
.about-card-content > :last-child > :last-child {
	margin-bottom: 0;
}

@media (max-width: 920px) {
	.about-cards-grid {
		grid-template-columns: 1fr;
	}
}