div.staff {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-inline: 1rem;

}

div.staff > * {
	flex: 1 1 clamp(40ch, calc(100% / 3), 40ch);
	max-width: 700px;
}


.staff-show {
	margin-inline: 2rem;
	gap: 1rem 2rem;
	display: grid;
	grid-template:
			"intro content features" auto
			/ minmax(40ch, min-content) 70ch minmax(min-content, 40ch);
	align-items: start;
	justify-content: space-evenly;
}

.staff-show > .staff-tile {
	grid-area: intro;

}


.staff-show > .staff-tile a {
	color: var(--accent-1)
}

.staff-show > .staff-content {
	grid-area: content;
	text-align: justify;
	max-width: 70ch;
	justify-self: center;
}

@media (max-width: 100rem/*80rem <= width < 100rem*/) and (min-width: 80rem) {
	.staff-show  {
		grid-template: "intro content" "features features" / minmax(40ch, min-content) 70ch;
	}
}

@media (max-width: 80rem) {
	.staff-show  {
		grid-template: "intro" "content" "features" / minmax(100%, 70ch);
	}
}

.staff-show > nav {
	grid-area: features;


}

.staff-show > nav> h3 {
	text-transform: uppercase;
	font-weight: 300;
	color: var(--text-color-faded);
}

.staff-show > nav ul {
	padding: 0;
	font-size: .75em;
	display: flex;
	flex-wrap: wrap;
}

.staff-show > nav li {
	list-style: none;
	flex: 1 0 clamp(40ch, 50%, 60ch);
	padding: .5rem;
}

h2 .material-symbols-outlined {
	justify-self: start;
	font-size: 1em;
	align-self: center;
	cursor: pointer;
	color: var(--text-color-faded);
	text-decoration: none;


}

h2:not(:hover) h2 .material-symbols-outlined {
	visibility: hidden;
}

.staff-tile {
	display: grid;
	place-content: stretch;
	padding: 1rem;
	transition: all .15s ease-out;


}

.staff-tile:not(.disabled):hover {
	scale: 1.025;
	background: var(--fill-color-2);
}

.staff-tile > * {
	text-decoration: none;
	text-align: center;
	color: inherit;
	display: grid;
	justify-content: center;
	place-items: center;
	gap: 1rem;
	grid-template:
        "img" auto
        "info" 1fr / 1fr;
	align-items: start;
	align-content: start;
}

.staff-tile > * > img {
	grid-area: img;
	width: clamp(50px, 100%, 300px);
	border-radius: 50%;
	box-sizing: content-box;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
	border-color: var(--fill-color-2);
	border-style: solid;
	border-width: .25rem;
}

.staff-tile > * > div {
	grid-area: info;
	justify-self: stretch;
}

.staff-tile > * > div p {
	max-width: 70ch;
}

.staff-tile > * h3.highlight {
	grid-area: name;
	margin-right: 2em;
}

.staff-tile > * h3.highlight::before {
	inset: 0 -2em;
}

.staff-tile > * h4 {
	grid-area: role;
	margin: .25rem 0 .5rem;
	font-weight: 300;
	text-transform: uppercase;
	color: var(--text-color-faded);
}

.staff-tile > * p {
	grid-area: resume;
	margin: 0;
	text-align: justify;
}

.staff-tile > * p::after {
	content: "Read details »";
	margin-left: .75em;
	font-size: smaller;
	color: var(--text-color-faded);
	white-space: nowrap;
	text-transform: uppercase;
}

@media (hover: none) {
	.staff-tile > * p::after{
		display: block;
		margin-top: .5em;
		margin-left: 0;
	}
}