.infostatGroup {
	display: flex;
	flex-wrap: wrap;
	column-gap: $grid-gutter;
	justify-content: space-around;

	//@supports (grid-template-columns: repeat(auto-fill, minmax(15em, 1fr))) {
	//	display: grid;
	//	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	//}

	> * {
		align-self: center;
		flex: 15em 1 0;
		max-width: 20em;
	}

	figure {
		margin: auto;
	}
}

.infostat {
	position: relative;
	display: flex;
	align-self: center;
	flex: 1 0 15em;
	max-width: 20em;
	margin: $spacing-2xs auto;
	border-radius: 100%;
	border: $border-accent-width solid transparent;
	background: $navy;
	--color: #{choose-contrast-color-prefer-white($navy)};
	color: var(--color, white);
	@include typescale('xs');

	@media (min-width: 30rem) {
		flex: 1 0 40%;
		min-width: 35%;
	}

	@media (min-width: 70rem) {
		flex: 1 0 17.5em;
		min-width: auto;
	}

	//@media (min-width: 70rem) {
	//	@include typescale('sm');
	//}

	&::before {
		content: '';
		padding-bottom: 100%;
	}

	:where(span) {
		margin: $spacing-2xs 12.5%;
		display: block;
	}

	&__content {
		width: 100%;
		min-width: 10em;
		align-self: center;
		padding: 1em 2em 1em;
		margin: auto;
		text-align: center;
		@include line-height('compact');
	}

	&__icon {
		font-size: 1.5em;
		margin-top: -2em;
		margin-bottom: $spacing-xs;


		@media (min-width: 40rem) {
			font-size: 2em;
		}
	}

	&__stat {
		font-size: 2em;
		font-weight: 200;
		margin: 0;
		opacity: 0.9;
		letter-spacing: -0.05em;

		@media (min-width: 40rem) {
			font-size: 3em;
		}

		&--lg {
			font-size: 2.5em;
			line-height: 1;

			@media (min-width: 40rem) {
				font-size: 4.5em;
			}
		}

		&--xl {
			font-size: 4em;
			line-height: 1;

			@media (min-width: 40rem) {
				font-size: 6em;
			}
		}
	}

	&__desc {
		color: (--color);
	}
}

// Backgrounds

.infostat.is-style-secondary {
	background: $secondary;
	--color: #{choose-contrast-color-prefer-white($secondary)};
}

.infostat.is-style-tertiary {
	background: $tertiary;
	--color: #{choose-contrast-color-prefer-white($tertiary)};
}

.infostat.is-style-grey {
	background: $grey--light;
	--color: #{$text-color};
}

.infostat.is-style-white {
	background: $offwhite;
	--color: #{$primary};
}

.infostat.is-transparent {
	background: transparent;
}

// Gradients

.infostat {
	&[class*='has-gradient-style'] {
		--gradient-start-color: #{$secondary};
		--gradient-end-color: #{$primary};

		&::after {
			content: '';
			position: absolute;
			top: -$border-accent-width;
			left: -$border-accent-width;
			right: -$border-accent-width;
			bottom: -$border-accent-width;
			padding: $border-accent-width;
			border-radius: 100%;
			background: linear-gradient(110deg,
				var(--gradient-start-color) 25%,
				var(--gradient-end-color) 75%,
			);
			mask: linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
		}

		.infostat__stat {
			background: linear-gradient(110deg,
				var(--gradient-start-color) 25%,
				var(--gradient-end-color) 75%,
			);
			background-clip: text;
			-webkit-text-fill-color: transparent;
			text-fill-color: transparent;
		}

	}
	&.has-gradient-style-1 {
		--gradient-start-color: #{#AF82B9};
		--gradient-end-color: #{#0190A7};
	}

	&.has-gradient-style-2 {
		--gradient-start-color: #{#0169A4};
		--gradient-end-color: #{#3AAE72};
	}

	&.has-gradient-style-3 {
		--gradient-start-color: #{#59AB53};
		--gradient-end-color: #{#CDAD10};
	}

	&.has-gradient-style-4 {
		--gradient-start-color: #{#CCAE10};
		--gradient-end-color: #{#BF4B2D};
	}
}