.personnel {

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

		.button {
			padding: .5em 1.5em;
			font-weight: bold;
			border: 2px solid $col-bg-2-light;
			border-radius: .3em;
			cursor: pointer;
			transition: all .2s ease-out;

			&:hover, &.active {
				border-color: $col-bg-3-dark;
				box-shadow: 0 0 10px rgba(0,0,0,0.1);

				@media (prefers-color-scheme: dark) {
					border-color: $col-bg-2-light;
				}
			}

			@media (prefers-color-scheme: dark) {
				border-color: $col-bg-3-dark;
			}
		}
	}

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

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

		.name {
			font-size: 1.1em;
			font-weight: bold;
		}

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

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

	.personnel .person img {
		margin-bottom: .5em;
	}
}