@charset 'UTF-8';
/*----------------------------------------

	- staff
		- staff_heading
		- staff_list
-----------------------------------------*/

/*----------------------------------------
staff
-----------------------------------------*/

.staff {
	margin-top: 48px;
}

/*----------------------------------------
staff_heading
-----------------------------------------*/

.staff_heading {
	display: grid;
	grid-template-columns: 600px minmax(auto, 325px);
	align-items: end;
	justify-content: space-between;
}

.staff_heading_text p:not(:first-of-type) {
	margin-top: 16px;
}

@media screen and (max-width: 960px) {
	.staff_heading {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.staff_heading_title figure {
		max-width: 600px;
	}
}

@media screen and (max-width: 800px) {
	.staff_heading {
		gap: 32px;
	}
}

/*----------------------------------------
staff_list
-----------------------------------------*/

.staff_list {
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 32px;
}

.staff_list .item {
	position: relative;
}

.staff_list .item a {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	border-radius: 8px;
	background-color: var(--color_sand);
	overflow: hidden;
}

.staff_list .item figure {
	width: 100%;
	aspect-ratio: 3/2;
	display: flex;
	align-items: flex-start;
}

.staff_list .item img {
	object-fit: contain;
}

@media (hover: hover) {
	.staff_list .item a:hover figure {
		background-color: var(--color_sapphire-500);
	}

	.staff_list .item a:hover img {
		opacity: 0.33;
	}
}

.staff_list .item .staff_text {
	padding: 24px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	gap: 8px;
}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 800px) {
	.staff_list {
		margin-top: 48px;
		grid-template-columns: 1fr;
	}
}