.personnel {

	.filters {
		display: flex;
		justify-content: center;
		gap: 1em;
		margin-bottom: 5em;

		.button {
			padding: .5em 1.5em;
			font-weight: bold;
			border: 2px solid #ccc;
			border-radius: .5em;
			cursor: pointer;
			box-shadow: 0 0 10px rgba(0,0,0,0.1);
			transition: border-color .2s ease-out;

			&:hover, &.active {
				border-color: #333;

				@media (prefers-color-scheme: dark) {
					border-color: #ccc;
				}
			}

			@media (prefers-color-scheme: dark) {
				border-color: #333;
			}
		}
	}

	.person {
		text-align: center;
		transition: opacity .5s ease-out;

		img {
			border-radius: 1em;
			margin-bottom: 1em;
			box-shadow: 0 0 15px rgba(0,0,0,0.3);
		}

		.name {
			font-weight: bold;
		}

		&.hidden {
			opacity: .25;
		}
	}
}

@media only screen and (max-width: $width-mobile) {
	.personnel .grid {
		grid-template-columns: 1fr 1fr;
		gap: 1em;
	}
}