website/components/MemberCard.css

.components__member_card {
	display: grid;
	grid-template-rows: 1fr auto;
	width: 16rem;
	aspect-ratio: 1;
	box-shadow: 0 0 0.4rem 0.2rem var(--_translucent);
	border: var(--_border-size) solid transparent;
	background-size: 90%;
	background-position-x: center;
	background-repeat: no-repeat;

	&:has(a:focus-visible),
	&:hover {
		border: var(--_border-size) solid var(--_accent-color);
	}

	& h3 {
		margin: 0;
		text-align: center;
	}

	& a {
		outline: none;
	}
}

.components__member_card__icon {
	height: 100%;
	object-fit: cover;
	overflow: hidden;
}

.components__member_card__content {
	background-color: var(--_translucent-bg);
	backdrop-filter: blur(var(--_blur));
	display: flex;
	flex-direction: column;
	padding: var(--_gap-half);
	gap: var(--_gap-half);
}

.components__member_card__groups {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_gap-half);

	& span {
		padding: var(--_gap-half);
		background-color: var(--_translucent);
	}
}