#education {
	background : var(--color-page-main);
	overflow   : hidden;
}

#education .education-shell {
	display : grid;
}

#education .education-heading-kicker {
	display        : block;
	font-family    : var(--font-ui);
	font-size      : 13px;
	line-height    : 1;
	letter-spacing : 0.22em;
	text-transform : uppercase;
	color          : rgba(75, 46, 32, 0.64);
}

#education .education-heading-main {
	display        : block;
	max-width      : 18ch;
	margin         : 0 auto;
	font-family    : var(--font-heading);
	font-size      : clamp(30px, 4.1vw, 56px);
	line-height    : 0.94;
	letter-spacing : -0.03em;
	font-weight    : 500;
	text-wrap      : balance;
	color          : rgba(75, 46, 32, 0.92);
}

#education .education-visual {
	display         : flex;
	gap             : 34px;
	align-items     : flex-start;
	justify-content : center;
	width           : 100%;
	min-width       : 0;
}

#education .education-column {
	flex          : 0 0 240px;
	display       : grid;
	row-gap       : 34px;
	align-content : start;
}

#education .education-center {
	flex            : 0 1 640px;
	display         : grid;
	row-gap         : 18px;
	align-content   : start;
	justify-items   : center;
	min-width       : 0;
}

#education .education-center h3 {
	display    : grid;
	gap        : 10px;
	width      : 100%;
	margin     : 0;
	text-align : center;
	color      : var(--color-brown-main);
	position   : relative;
	z-index    : 4;
}

#education .education-flower {
	--circle-size     : 210px;
	--orbit-distance  : 186px;
	--constellation-w : 640px;
	--constellation-h : 640px;
	position         : relative;
	height           : var(--constellation-h);
}

#education .education-flower .circle-premium-center {
	box-shadow : 0 22px 52px rgba(110, 80, 42, 0.24);
}

#education .education-flower .circle {
	top : calc(50% - 28px);
}

#education .education-card {
	width    : 240px;
	padding  : 0;
}

#education .education-card .gallery-card-media {
	aspect-ratio  : 1 / 0.57;
	margin-bottom : 12px;
}

#education .education-card .gallery-card-body {
	padding : 0;
}

#education .education-card h4 {
	margin : 0 0 8px;
}

#education .education-card small {
	display        : block;
	max-width      : none;
	font-family    : var(--font-body);
	/* font-size      : 13px; */
	line-height    : 1.2;
	letter-spacing : 0.01em;
	text-transform : lowercase;
	color          : rgba(47, 34, 27, 0.76);
}

@media (max-width : 980px) {
	#education {
		padding : 32px 0 36px;
	}

	#education .education-visual {
		gap : 22px;
	}

	#education .education-column {
		flex-basis : 190px;
	}

	#education .education-center {
		flex-basis : 520px;
	}

	#education .education-flower {
		--circle-size     : 182px;
		--orbit-distance  : 160px;
		--constellation-w : 520px;
		--constellation-h : 520px;
	}

	#education .education-flower .circle {
		top : calc(50% - 22px);
	}

	#education .education-shell h3 {
		gap        : 8px;
		margin     : 0;
	}

	#education .education-heading-kicker {
		font-size      : 12px;
		letter-spacing : 0.2em;
	}

	#education .education-heading-main {
		font-size : clamp(28px, 4.8vw, 44px);
	}

	#education .education-card {
		width : 190px;
	}

	#education .education-card small {
		font-size : 12px;
	}

}

@media (max-width : 640px) {
	#education {
		padding : 24px 0 28px;
	}

	#education .education-visual {
		display : grid;
		gap     : 18px;
	}

	#education .education-column {
		flex-basis  : auto;
		row-gap    : 14px;
		max-width  : 420px;
		width      : 100%;
		justify-self: center;
	}

	#education .education-column-left {
		order : 2;
	}

	#education .education-center {
		order : 1;
	}

	#education .education-column-right {
		order : 3;
	}

	#education .education-flower {
		--circle-size     : 100%;
		--constellation-w : 420px;
		height            : auto;
		max-width         : 420px;
	}

	#education .education-flower .circle {
		top : auto;
	}

	#education .education-shell h3 {
		gap       : 7px;
		margin    : 0;
	}

	#education .education-heading-kicker {
		font-size      : 11px;
		letter-spacing : 0.16em;
	}

	#education .education-heading-main {
		font-size      : 28px;
		line-height    : 0.96;
		letter-spacing : -0.025em;
	}

	#education .education-card {
		width    : 100%;
	}

	#education .education-card .gallery-card-media {
		aspect-ratio  : 1 / 0.61;
		margin-bottom : 10px;
	}

	#education .education-card small {
		font-size   : 11px;
		line-height : 1.32;
	}
}