.leadership-wrapper {
	container-name: leadershipContainer;
	container-type: inline-size;
}
.leadership {
	gap: var(--pane-gap);

	.leadership-listing,
	.trustee-listing,
	.delegate-listing {
		background: #fafafa;
	}

	.trustee-listing,
	.delegate-listing {
		padding: 0.75rem 1rem;
		height: max-content;
	}

	.leadership-listing .flex-col span,
	.trustee,
	.delegate-listing .position {
		font-size: 14px;
	}
}
.leadership-elected {
	.leadership-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;
		}
	}
}

.leadership-trustees {
	.trustee-listing {
		flex: 1 1 100%;
		gap: 0.5rem;

		.area {
			font-weight: 800;
		}
	}
}

.leadership-association {
	.delegate-listing {
		flex: 1 1 100%;
		gap: 0.2rem;

		.name {
			font-weight: 800;
		}
	}
}
@container leadershipContainer (min-width: 350px) {
	.leadership {
		.leadership-elected .leadership-listing,
		.leadership-trustees .trustee-listing,
		.leadership-association .delegate-listing {
			flex: 0 1 calc(50% - 0.5rem);
		}
	}
	.leadership-elected {
		.leadership-listing {
			align-items: unset;

			.photo {
				max-width: 400px;
			}
		}
	}
}
@container leadershipContainer (min-width: 700px) {
	.leadership {
		.leadership-elected .leadership-listing,
		.leadership-trustees .trustee-listing,
		.leadership-association .delegate-listing {
			flex: 0 1 calc(33.333% - 0.667rem);
		}
	}
}
@container leadershipContainer (min-width: 850px) {
	.leadership {
		.leadership-elected .leadership-listing {
			flex: 0 1 calc(33.333% - 0.667rem);
		}
		.leadership-trustees .trustee-listing,
		.leadership-association .delegate-listing {
			flex: 0 1 calc(25% - 0.75rem);
		}
	}
}
@container leadershipContainer (min-width: 1100px) {
	.leadership {
		.leadership-elected {
			.leadership-listing {
				flex: 0 1 calc(20% - 0.8rem);
			}
		}
		.leadership-trustees {
			.trustee-listing {
				flex: 0 1 calc(20% - 0.8rem);
			}
		}
	}
}
