div.staff {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* gap: 1rem; */
	padding-inline: 1rem;
	& > * {
		flex: 1 1 clamp(40ch, calc(100% / 3), 40ch);
		max-width: 700px;
		/*padding: .5rem;*/
	}
}

/*form.staff-write {
	padding: 0 2rem 2rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;

	> label {
		display: grid;
		grid-template: auto auto / subgrid;
		gap: .5rem;

		> [name="excerpt"] {
			height: 10ch;
		}

		> :is(input, textarea) {
			padding: .25rem;
		}

		&.publish {
			grid-template: auto / auto auto;
			justify-content: start;
		}
	}

	> .content {
		grid-template-columns: 1fr auto;
		gap: .5rem 1rem;

		.cheat-sheet {
			font-size: .75rem;
			align-self: end;
		}

		!*> :first-child {
			grid-column: 1 / -1;
		}*!

		> textarea {
			height: 60ch;
			resize: vertical;
			font-family: "Ubuntu Mono", monospace;
		}
	}

	> .buttons {
		display: flex;
		gap: 1rem;

		> * {
			border-radius: .25em;
			background: var(--accent-strong);
			margin: 0;
			padding: .25em .5em;
			border: none;
			text-decoration: none;
			color: var(--text-color);
			font-weight: normal;
		}

		> .delete {
			background: oklch(from var(--accent-strong) .5 calc(c * 3) 24);
			color: oklch(from var(--text-color) calc(1 - l) c h);
		}
	}
}*/

.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);
	/*display: flex;*/
	/*flex-wrap: wrap;*/
	align-items: start;
	justify-content: space-evenly;

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

		& a {
			color: var(--accent-1)
		}
	}

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

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

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

	> nav {
		grid-area: features;

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

		& ul {
			padding: 0;
			font-size: .75em;
			display: flex;
			flex-wrap: wrap;
		}

		& 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) & {
		visibility: hidden;
	}
}


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

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

	> * {
		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;
		
		& > img {
			grid-area: img;
			/* height: 300px; */
			width: clamp(50px, 100%, 300px);
			border-radius: 50%;
			box-sizing: content-box;
			aspect-ratio: 1 / 1;
			object-fit: cover;
			object-position: top center;
			/*border-image: linear-gradient(to bottom, var(--accent-1), var(--accent-2)) 1;*/
			border-color: var(--fill-color-2);
			border-style: solid;
			border-width: .25rem;
		}

		& > div {
			grid-area: info;
			justify-self: stretch;

			& p {
				max-width: 70ch;
			}
		}

		& h3.highlight {
			grid-area: name;
			margin-right: 2em;

			&::before {
				inset: 0 -2em;
			}
		}

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

		& p {
			grid-area: resume;
			margin: 0;
			text-align: justify;

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

				@media (hover: none) {
					display: block;
					margin-top: .5em;
					margin-left: 0;
				}
			}
		}
	}
}