.team-section {

	.team-head {display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; margin: 0 var(--site-padding);}

	h2, p {margin: 15px 0;}
	h2 {border-bottom: 1px solid var(--c-bg-lighter); padding-bottom: 15px;}
	svg {font-size: 64px;}

	/*@media (min-width: 600px) {
		.team-head {margin: 0 var(--site-padding);}
	}*/

}

.team-grid {

	& {display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); text-align: center; margin: 50px auto;}

	& > * {background: var(--c-bg-dark); border-radius: var(--radius); border: 1px solid var(--c-bg-lighter); box-shadow: 0 2px 5px 0 #0005; padding: 25px 20px; display: flex; flex-direction: column; justify-content: center;}

	.img {
		max-width: 120px; height: 110px; overflow: hidden; margin: 10px auto; position: relative;
		&:after {content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, var(--c-bg-dark));}
		img {width: 100%;}
	}

	h3 {font-size: 1.5em; margin: 5px 0;}
	.desc {margin-top: 15px; text-wrap: balance;}

	.role {border: 1px solid var(--c-bg-lighter); background: var(--c-bg-light); display: inline-block; margin: 8px auto 0; padding: 0px 10px; border-radius: 20px; font-weight: 700; font-size: .8em;}

	.member-large {grid-row: span 2;}

}

header::before {content: ""; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(to top, var(--c-bg-dark), transparent 200px); pointer-events: none;}
header::after {z-index: 3; pointer-events: none;}

.team-art {
	& {display: flex; justify-content: center; overflow: hidden; margin: 0 -20px; margin-bottom: -150px; height: min(330px, 120px + 30vw); position: relative; z-index: 0;}
	div {max-width: 150px; width: 20vw; display: flex; flex-direction: column;}
	img {margin: 0 -30px; position: relative; top: 0; transition: all .3s; margin-top: 20px;}
	img:hover {position: relative; top: -20px;}
	& > :nth-child(1) {order: 5; z-index: 10;}
	& > :nth-child(2) {order: 4; margin-top: 10px; z-index: 9;}
	& > :nth-child(3) {order: 6; margin-top: 10px; z-index: 8;}
	& > :nth-child(4) {order: 3; margin-top: 20px; z-index: 7;}
	& > :nth-child(5) {order: 7; margin-top: 20px; z-index: 6;}
}