/* Highlights */

	.highlights {
		width: 100%;
		margin: (_size(element-margin) * 1.25) 0;

		@include flexgrid((
			columns:			3,
			gutters:			3rem,
			vertical-align:		stretch
		));

		.content {
			border-radius: _size(border-radius);
			height: 100%;
			padding: 3rem;
			text-align: center;

			.icon {
				font-size: 5rem;
			}
		}

		> div {

			> :last-child {
				margin-bottom: 0;
			}

		}

		@include breakpoint('<=medium') {
			@include flexgrid-resize((
				columns:		2,
				gutters:		2rem,
				prev-columns:	3
			));

			.content {
				padding: 2rem;
			}
		}

		@include breakpoint('<=small') {
			@include flexgrid-resize((
				columns:		1,
				gutters:		2rem,
				prev-columns:	(3, 2)
			));

		}
	}

	@mixin color-highlights($p: null) {
		$highlight: _palette($p, highlight);

		.highlights {
			.content {
				background: _palette($p, bg);
				box-shadow: 0px 0px 4px 1px _palette($p, border-lt);
			}
		}
	}

	@include color-highlights;