.current-contributors,
.past-contributors {
	display: flex;
	flex-direction: column;

	> div {
		display: grid;
		grid-template-columns: repeat(4, 150px);
		justify-content: center;
		flex-wrap: wrap;
		gap: 25px;

		@include media(mobile) {
			grid-template-columns: repeat(2, 150px);
		}
	}
}

.contributor-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 25px;

	.headshot-placeholder {
		width: 150px;
		height: 150px;
		background-color: rgba(142, 159, 200, 0.1098039216);
		border-radius: 3px;
		margin-bottom: 10px;
		display: grid;
		place-items: center;
	}

	// use width/height to enforce aspect ratio i guess
	.headshot {
		width: 150px;
		height: 150px;

		margin-bottom: 10px;

		img {
			width: 150px;
			height: 150px;

			position: absolute;
			object-fit: cover;
			object-position: 50% 20%;
			border-radius: 3px;
		}

		.serious {
			z-index: $z-index-serious;
			transition: 0.2s;

			&:hover {
				opacity: 0;
			}
		}
	}

	.name {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		width: 100%;
		margin-bottom: 3px;

		p {
			// font-weight: 500;
			color: $bt-grey-text;
		}

		svg {
			width: 22px;
			height: 21px;
			padding: 2px;
			transition: 0.2s;
			border-radius: 4px;
			margin-bottom: 2px;

			&:hover {
				background-color: $bt-button-background;
			}
		}
	}

	.role {
		font-size: 14px;
		word-wrap: normal;
		color: $bt-light-text;
	}
}
