.c-person {
	@include template(image, name, subtitle);
}


.c-person__image {
	display: inline-block;
	background: #dce4ed; // custom color for background of transparent photos
	// Images dimension are w:192 x h:224
	// Path based on aspect ratio 1 x 1.6667
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}


.c-person__name {
	margin-top: space(1);
	color: palette(primary, 500);
}


.c-person__firstname {
	@include font-size(m);
	@include font-weight(bold);
}


.c-person__subtitle {
	@include text-style(5);
	color: palette(secondary, 500);
}

.c-person__email {
	text-decoration: none;
	color: palette(text, 500);

	&:hover	{
		color: palette(action, 500);
	}
}


.c-person--small {
	display: grid;
	grid-gap: 0 space(3);
	grid-template-columns: 96px auto;
	grid-template-rows: 1fr auto 1fr;
	grid-template-areas:
		"image ."
		"image name"
		"image subtitle";

	& .c-person__name {
		@include font-size(base, 18);
		margin: 0 0 space(1) 0;
	}
}