Personnel filtering

sass/_personnel.scss

@@ -1,17 +1,43 @@
 .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;
+			}
+		}
+	}
+
 	.person {
 		text-align: center;
+		transition: opacity .5s ease-out;
 
 		img {
 			border-radius: 1em;
 			margin-bottom: 1em;
-			filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
+			box-shadow: 0 0 15px rgba(0,0,0,0.3);
 		}
 
 		.name {
 			font-weight: bold;
 		}
+
+		&.hidden {
+			opacity: .3;
+		}
 	}
 }