.staff-wrapper {
	container-name: staffContainer;
	container-type: inline-size;
}
.staff {
	gap: var(--pane-gap);

	.staff-listing {
		background: #fafafa;
	}

	.staff-listing .flex-col span {
		font-size: 14px;
	}
}
.staff-elected {
	.staff-listing {
		flex: 1 1 100%;
		gap: 0;
		align-items: center;

		.photo {
			max-width: 200px;
			aspect-ratio: 1;
			overflow: hidden;
		}

		> .flex-col {
			gap: 0.35rem;
			padding: 0.75rem 1rem;
		}

		.position {
			font-weight: 800;
		}
	}
}

@container staffContainer (min-width: 350px) {
	.staff {
		.staff-elected .staff-listing,
		.staff-trustees .trustee-listing,
		.staff-association .delegate-listing {
			flex: 0 1 calc(50% - 0.5rem);
		}
	}
	.staff-elected {
		.staff-listing {
			align-items: unset;

			.photo {
				max-width: 400px;
			}
		}
	}
}
@container staffContainer (min-width: 700px) {
	.staff {
		.staff-elected .staff-listing {
			flex: 0 1 calc(33.333% - 0.667rem);
		}
	}
}
@container staffContainer (min-width: 850px) {
	.staff {
		.staff-elected .staff-listing {
			flex: 0 1 calc(33.333% - 0.667rem);
		}
	}
}
@container staffContainer (min-width: 1100px) {
	.staff {
		.staff-elected .staff-listing {
			flex: 0 1 calc(20% - 0.8rem);
		}
	}
}