$c-servicepoint-gap: space(3);


.c-servicepoint {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: -$c-servicepoint-gap;
}


.c-servicepoint__image {
	margin-top: $c-servicepoint-gap;
	margin-right: $c-servicepoint-gap;
	border-radius: 100%;
	flex-grow: 0;
	flex-basis: 120px;
}


.c-servicepoint__content {
	@include hyphenate;
	flex-grow: 999;
	flex-basis: 0;
	min-width: column(3,5);
	margin-top: $c-servicepoint-gap;
}


.c-servicepoint__name {
	@include font-size(base);
	@include font-weight(regular);
	color: palette(neutral, 300);
}


.c-servicepoint__body {
	@include font-size(l);
	@include font-weight(medium);
	color: palette(neutral, 800);
}


.c-servicepoint__info {
	margin-top: space(2);
	display: inline-flex;
	flex-direction: column;
}


.c-servicepoint__link {
	display: inline-flex;
	align-items: baseline;
	text-decoration: none;
	cursor: pointer;
	color: palette(neutral, 500);

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


.c-servicepoint__icon {
	flex: none;
	width: 16px;
	margin-right: space(2);
	margin-top: 5px;
	color: palette(neutral, 700);

	.c-data__item:hover & {
		color: currentColor;
	}

	&[data-icon="mail"] {
		transform: translateY(2px);
	}
}


.c-servicepoint__data {
	transition: color 200ms linear;

	.c-data--on-dark & {
		color: currentColor;
	}

	.c-data__item:hover & {
		color: palette(action);
	}
}


.c-servicepoint--on-dark {
	.c-servicepoint__body {
		color: palette(neutral, 0);
	}
	.c-servicepoint__icon {
		color: palette(neutral, 0);
	}
	.c-servicepoint__data {
		color: palette(neutral, 300);
	}
}