.supt-card-people {
	@mixin card-hover .supt-card-people;

	display: flex;
	flex-direction: column;
	gap: $spacing-4;

	&__head {
		border-radius: 50%;
		background-color: $color-grey-2;

		img {
			display: block;
			aspect-ratio: 1/1;

			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: $spacing-4;
	}

	&__content {
		display: flex;
		flex-direction: column;
		gap: $spacing-1;
		padding-right: $spacing-2;

		@media (min-width: $breakpoint-md) {
			gap: $spacing-2;
			padding-right: $spacing-6;
		}
	}

	&__name {
		@extend %t-h4;
		margin: 0;
	}

	&__role {
		@extend %t-body-s;

		color: $color-grey-5;
	}
}