.section-api-datapoints {
	text-align: center;

	.article {
		margin: 0 auto;
	}

	.datapoints {
		display: flex;
		flex-direction: row;
		margin: 0 -12px;
		flex-wrap: wrap;

		@media @bp_880 {
			justify-content: center;
		}
		
		.item {
			.box-sizing;
			width: 50%;
			display: flex;
			padding: 0 12px;
			margin: 20px 0;

			@media @bp_880 {
				width: 25%;
			}

			&:nth-child(1),
			&:nth-child(3) {
				border-right: 2px solid @black;
				justify-content: flex-end;

				@media @bp_880 {
					border: 0;
				}

				.datapoint {
					padding-right: 20%;

					@media @bp_880 {
						padding: 20px;
					}
				}
			}

			&:nth-child(2),
			&:nth-child(4) {

				.datapoint {
					padding-left: 20%;

					@media @bp_880 {
						padding: 20px;
					}
				}
			}

			&:last-child {

				@media @bp_880 {
					width: auto;
				}

				.datapoint {
					border: 0;
				}
			}
		}
	}

	h2 {
		.font-size(24);
		line-height: 28px;
		font-weight: 500;
		padding-bottom: 40px;

		@media @bp_768 {
			.font-size(42);
			line-height: 49px;
			padding-bottom: 60px;
		}
	}

	.datapoint {
		.font-size(14);
		line-height: 18px;
		text-align: left;
		max-width: 200px;

		@media @bp_600 {
			.font-size(20);
			line-height: 26px;
		}

		@media @bp_880 {
			.font-size(20);
			line-height: 26px;
			display: flex;
			flex-direction: column;
			flex: 1;
			line-height: 22px;
			margin: 0 auto;
			align-items: flex-start;
			border-right: 2px solid @black;
			padding: 10px 20px;
			max-width: none;
			text-align: left;
		}

		strong {
			.font-size(20);
			line-height: 28px;
			font-weight: 500;
			display: block;

			@media @bp_600 {
				.font-size(30);
				line-height: 36px;
			}

			@media @bp_880 {
				.font-size(30);
				line-height: 36px;
			}

			@media @bp_1024 {
				.font-size(42);
				line-height: 49px;
			}
		}
	}
}