// Component settings: References
// ------------------------------------------

$o-references: (
	'gap':				space(4),
	'padding':			space(3),
	'border-size':		0px,
	'border-color' :	palette(border, 100),
	'bgcolor' :			palette(neutral, 0),
	'color' :			palette(text, 500),
	'colorSub' :		palette(text, 300),
);

// ------------------------------------------

.o-references {
	display: flex;
	flex-wrap: wrap;
	margin: map-get($o-references, 'gap') * -1;
}

.o-references__item {
	@include border-radius(s);
	flex: 0 1 100%;
	margin: map-get($o-references, 'gap');
	padding-top: map-get($o-references, 'padding');
	padding-bottom: map-get($o-references, 'padding');
	background-color: map-get($o-references, 'bgcolor');
	border: map-get($o-references, 'border-size') solid map-get($o-references, 'border-color');
	box-shadow: 0 3px 40px -10px rgba(0, 0, 0, 0.2);

	@include mq(800){
		flex-basis: calc(50% - #{double(map-get($o-references, 'gap'))} - #{double(map-get($o-references, 'border-size'))});
	}
}

.o-references__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: 0;
	padding-right: map-get($o-references, 'padding');
}

.o-references__picture {
	display: block;
	flex-grow: 1;
	flex-basis: 25%;
	margin-bottom: space(3);
	margin-left: map-get($o-references, 'padding');
}

.o-references__content {
	flex-grow: 9999;
	flex-basis: 18em;
	margin-left: map-get($o-references, 'padding');
	color: map-get($o-references, 'color');
}

.o-references__author {
	margin-top: map-get($o-references, 'padding');
}

.o-references__heading {
	@include font-size(base);
	font-weight: normal;
	color: map-get($o-references, 'color');
}

.o-references__subheading {
	color: map-get($o-references, 'colorSub');
}