// ============================================================================
// :: Contact card
// ============================================================================
/**
 * Contact card component that represents a person with a name, function and
 portrait
 */

// ============================================================================
// :: Root
// ============================================================================
.m-contact-card {
	display: flex;
	align-items: center;

	margin-left: -1.6rem;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-contact-card__column {
	padding-left: 1.6rem;
}

.m-contact-card__picture {
	position: relative;

	display: block;
	width: 9.6rem;
	height: 9.6rem;
	overflow: hidden;

	border-radius: 100%;

	@include respond-at($screen-medium-base) {
		width: 12.8rem;
		height: 12.8rem;
	}
}

.m-contact-card__image {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.m-contact-card__name {
	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size;
	line-height: $line-height;

	color: $text-color-grey;
}

.m-contact-card__function {
	display: block;
	margin-top: 0.8rem;

	font-family: $font-family-roboto;
	font-weight: $font-weight-lite;
	font-size: $font-size-1x-small;
	line-height: $line-height;

	color: $text-color-dark-brown;
}