$c-servicepoint-bp-width: 420px; // size of component when we switch from stacked to row view
$c-servicepoint-gap: space(2);


.c-servicepoint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	text-align: left; // needed for when a parent element has text-align center
}


.c-servicepoint__image {
	flex: 0;
	min-width: auto;
	max-width: 178px + $c-servicepoint-gap;
	padding-right: $c-servicepoint-gap;
	border-radius: 100%;
}


.c-servicepoint__content {
	@include hyphenate;
	min-width: 50%; // Has to be minimal half the size of the container
	max-width: 100%;
	flex-grow: 1;
	flex-basis: calc(calc(#{$c-servicepoint-bp-width} - 100%) * 999); // Based on this method: https://heydonworks.com/article/the-flexbox-holy-albatross/
	margin-top: space(2);
	margin-bottom: space(2);

	@include mq(l) {
		flex-basis: auto;
	}
}


.c-servicepoint__body {
	margin-top: space(1);
}


.c-servicepoint__footer {
	margin-top: space(1);
}


.c-servicepoint__heading {
	@include font(base);
	color: palette(neutral, 500);
	border-radius: 100%;
}


.c-servicepoint__subheading {
	@include font(s);
	color: palette(neutral, 400);
}