$fb-space: 10px;
$fb-stream-break-m: 750px;
$fb-stream-break-l: 1200px;

.xprez-feature-boxes {
	@include cont-width($m-width + $fb-space*4);
	padding: 0 10px;

	.no-flexbox & {
		@include clearfix;
	}

	.flexbox & {
		display: flex;
		//flex-wrap: wrap;
	}

	@media only screen and (max-width: $fb-stream-break-m) {
		flex-wrap: wrap;
	}
}

[class^="xprez-feature-box-"], [class*=" xprez-feature-box-"] {
	.no-flexbox {
		float: left;
	}

	box-sizing: border-box;

	width: calc(33.3% - 20px);
	margin: 0 10px;
	background: $super-light-gray;
	padding: $g*2 40px;

	@media only screen and (min-width: $fb-stream-break-m) and (max-width: $fb-stream-break-l) {
		padding-left: 20px;
		padding-right: 20px;
	}

	@media only screen and (max-width: $fb-stream-break-m) {
		.no-flexbox {
			float: none;
		}
		width: 100%;
		margin: 10px 0;
	}

	@media only screen and (max-width: $typo-break-s) {
		padding: $g*1 20px;
	}
}

.xprez-feature-boxes {
	& + .xprez-feature-boxes {
		margin-top: $fb-space*2;
		@media only screen and (max-width: $fb-stream-break-m) {
			margin-top: 0;
		}
	}
}