.staff-wrapper {
	container-name: staffContainer;
	container-type: inline-size;
}
.staff {
	> h2 {
		font-size: calc(
			(var(--font-min__h3) * 1px) +
				(var(--font-max__h3) - var(--font-min__h3)) *
				(100vw - calc(var(--min-size) * 1px)) /
				(var(--max-size) - var(--min-size))
		);
	}

	h3 {
		font-size: calc(
			(var(--font-min__h5) * 1px) +
				(var(--font-max__h5) - var(--font-min__h5)) *
				(100vw - calc(var(--min-size) * 1px)) /
				(var(--max-size) - var(--min-size))
		);
		margin-bottom: -1rem;
	}

	.category-listing {
		flex: 1 1 100%;
		gap: 2rem;
	}

	.staff-listing {
		gap: 0.2rem;

		* {
			line-height: 1.2;
			font-size: calc(var(--font-size__base) - 1px);
		}

		.staff-position {
			/* font-size: calc(var(--font-size__base) + 1px); */
		}

		.staff-name {
			font-weight: 700;
		}

		.phone,
		.email {
			font-size: 14px;
		}
	}
}
@container staffContainer (min-width: 600px) {
	.staff {
		.category-listing {
			align-items: flex-start;
			.staff-listing {
				max-height: max-content;
			}
		}
	}
}
@container staffContainer (min-width: 600px) and (max-width: 849px) {
	.staff {
		.listing-wrapper {
			flex-direction: column;
			flex-wrap: nowrap;
			gap: var(--pane-gap);
		}
		.category-listing {
			flex-direction: row !important;
			flex-wrap: wrap;
			gap: 2rem;

			h3 {
				flex: 1 1 100%;
			}
			.staff-listing {
				flex: 0 1 calc(50% - 2rem);
			}
		}
	}
}
@container staffContainer (min-width: 850px) and (max-width: 949px) {
	.staff {
		.listing-wrapper {
			flex-direction: column;
			flex-wrap: nowrap;
			gap: var(--pane-gap);
		}
		.category-listing {
			flex-direction: row !important;
			flex-wrap: wrap;
			gap: 2rem;

			h3 {
				flex: 1 1 100%;
			}
			.staff-listing {
				flex: 0 1 calc(33.333% - 2rem);
			}
		}
	}
}
@container staffContainer (min-width: 950px) {
	.staff {
		.listing-wrapper {
			flex-wrap: nowrap;
		}
		.category-listing {
			flex: 1 1 calc(25% - 0.75rem);
		}
	}
}