coope/staticfiles/sass/components/_statistics.scss

///
/// Stellar by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Statistics */

	.statistics {
		@include vendor('display', 'flex');
		width: 100%;
		margin: 0 0 (_size(element-margin) * 1.5) 0;
		padding: 0;
		list-style: none;
		cursor: default;

		li {
			@include vendor('flex', '1');
			padding: 1.5em;
			color: _palette(fg-bold);
			text-align: center;

			&.style1 {
				background-color: _palette(accent1);
			}

			&.style2 {
				background-color: _palette(accent2);
			}

			&.style3 {
				background-color: _palette(accent3);
			}

			&.style4 {
				background-color: _palette(accent4);
			}

			&.style5 {
				background-color: _palette(accent5);
			}

			strong, b {
				display: block;
				font-size: 2em;
				line-height: 1.1;
				color: inherit !important;
				font-weight: _font(weight);
				letter-spacing: _font(letter-spacing);
			}

			&:first-child {
				border-top-left-radius: _size(border-radius);
				border-bottom-left-radius: _size(border-radius);
			}

			&:last-child {
				border-top-right-radius: _size(border-radius);
				border-bottom-right-radius: _size(border-radius);
			}

			.icon {
				display: inline-block;

				&:before {
					font-size: 2.75rem;
					line-height: 1.3;
				}
			}
		}

		@include breakpoint(medium) {
			li {
				strong, b {
					font-size: 1.5em;
				}
			}
		}

		@include breakpoint(small) {
			display: block;
			width: 20em;
			max-width: 100%;
			margin: 0 auto _size(element-margin) auto;

			li {
				&:first-child {
					border-bottom-left-radius: 0;
					border-top-right-radius: _size(border-radius);
				}

				&:last-child {
					border-top-right-radius: 0;
					border-bottom-left-radius: _size(border-radius);
				}

				.icon {
					&:before {
						font-size: 3.75rem;
					}
				}

				strong, b {
					font-size: 2.5em;
				}
			}
		}
	}