select.member-group-by {
	appearance: none;
	background: transparent;
	border: none;
	margin: 0 !important;
	~ svg {
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		width: 2em;
		height: 2em;
		fill: currentcolor;
		translate: 0 -12.5%;
	}
}

.team-member-group-list {
	width: 100%;
}

.team-member-group-list-item {
	display: grid;
	opacity: 1;
	grid-template-rows: 1fr;
	transition-duration: .2s;
	transition-property: opacity, grid-template-rows;
	> .collapsible-container {
		overflow: hidden;
	}
	&[data-location] {
		.team-member-item-location {
			display: none;
		}
	}
	&:not(:has(.team-member-item)) {
		display: none;
	}
}

.team-member-list {
	gap: 2rem;
	display: grid;
	--column-width: 312px;
	grid-template-columns: repeat(4, var(--column-width));
	align-items: end;
	@media (width < 1333px) {
		grid-template-columns: repeat(3, var(--column-width));
	}
	@media (width < 920px) {
		grid-template-columns: repeat(2, var(--column-width));
	}
	@media (width < 610px) {
		grid-template-columns: 1fr;
	}
	justify-content: start;
	> .team-member-item {
		width: calc(25% - 3 * 2rem);
		min-width: var(--column-width);

		.team-member-item-email, .team-member-item-tel {
			text-decoration: none;
		}
	}
	.u-avatar {
		width: 100%;
	}
}

.team-member-item-name.team-member-item-name.team-member-item-name {
	width: 1ch;
	hyphens: none;
	margin-block: .8em .6em;
}

.team-member-list-title.team-member-list-title.team-member-list-title {
	align-items: center;
	display: flex;
	position: relative;
	margin: 2em 0;
	&::after {
		content: "";
		flex-grow: 1;
		height: 0;
		border-top: 1px solid currentcolor;
		margin-left: 1em;
	}
}

.team-member-item-title,
.team-member-item-location {
	margin-block-end: .5em;
}

@media (width < 992px) {
	.team-member-item {
		margin-inline: auto;
	}
}