.section-stats {
	margin-top: 1.5rem;
}

.section-stats .stat-items {
	display: grid;
	gap: 1.5rem;
}

.block-page .section-stats .stat-wrapper p {
    text-align: center;
}

.block-page .section-stats .stat-items .product-stat + p {
	text-align: left;
}

.block-page .section-stats .stat-items .stat-wrapper {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.block-page .section-stats .stat-items > .flex-box {
	align-items: center;
	gap: 1rem;
}

.block-page .section-stats .stat-items > .flex-box > div:first-of-type {
	width: 7.5rem;
}

.block-page .section-stats .stat-items > .flex-box > div:last-of-type {
	flex: 1;
}

.block-page .section-stats .stat-items > .flex-box > div:last-of-type p:first-of-type {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-semibold);
	letter-spacing: calc(2 * var(--tracking-basis));
	margin: 0 0 0.25rem 0;
	text-transform: uppercase;
}

.block-page .section-stats .stat-items > .flex-box > div:last-of-type p:last-of-type {
	margin: 0;
}

/* number circle */
.section-stats .stat-number-circle-outer {
	aspect-ratio: 1 / 1;
	border: 3px solid var(--color-foreground);
	border-radius: 100vw;
	display: flex;
	flex-wrap: wrap;
	height: 7.5rem;
	place-content: center;
	width: 7.5rem;
}

.section-stats .stat-number-circle-inner {
	aspect-ratio: 1 / 1;
	background-color: var(--color-accent);
	border-radius: 100vw;
	border-width: 0;
	color: var(--color-background-standard);
	display: flex;
	flex-wrap: wrap;
	height: 6.5rem;
	padding: 0.25rem;
	place-content: center;
	text-align: center;
	text-transform: uppercase;
	width: 6.5rem;
}

.section-stats .stat-number-circle-inner p {
	color: var(--color-background-standard);
	line-height: 1;
	margin: 0;
	text-align: center;
}

.section-stats .stat-number-circle-inner p:first-of-type {
	font-family: var(--font-body);
	font-size: var(--font-size-heading-2);
	font-weight: var(--font-weight-bold);
}

.section-stats .stat-number-circle-inner p:last-of-type {
	font-size: var(--font-size-smaller);
	font-weight: var(--font-weight-bold);
}

/* icon */
.section-stats .stat-icon-wrapper {
	aspect-ratio: 1 / 1;
	border: 3px solid var(--color-foreground);
	border-radius: 100vw;
	display: flex;
	flex-wrap: wrap;
	height: 7.5rem;
	place-content: center;
	width: 7.5rem;
}

.section-standard .stat-icon-wrapper {
	background-color: var(--color-background-alternate);
}

.section-alternate .stat-icon-wrapper {
	background-color: var(--color-background-standard);
}

.section-alternate .stat-icon-wrapper svg {
	display: block;
	height: 5rem;
	margin: 0 auto;
	width: 5rem;
}

/* bar chart */
.section-stats .stat-bar .bar-container {
	aspect-ratio: 1 / 1;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	height: 7rem;
	margin: 0 auto;
	position: relative;
	width: 7rem;
}

.section-stats .stat-bar .bar-container .y-axis {
	border-left : 2px solid var(--color-foreground);
	height: 7rem;
	left: 0.5rem;
	position: absolute;
	top: 0;
	width: 2px;
}

.section-stats .stat-bar .bar-container .y-tick {
	border-top : 2px solid var(--color-foreground);
	height: 0;
	left: 0;
	position: absolute;
	width: 0.5rem;
}

.section-stats .stat-bar .bar-container .bar-chart-bar {
	border: 2px solid var(--color-foreground);
	border-bottom-width: 0;
	bottom: 0;
	display: block;
	position: absolute;
	width: 1.5rem;
}

/* statistics - pie chart */
.section-stats .pie-circle {
	aspect-ratio: 1 / 1;
	background-color: transparent;
	border-radius: 50%;
	height: 7rem;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 7rem;
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.section-stats .pie-hole {
	aspect-ratio: 1 / 1;
	background-color: var(--color-background-standard);
	border-radius: 50%;
	height: 4rem;
	left: 3rem;
	position: absolute;
	top: 3rem;
	width: 4rem;
	z-index: 1000;
}

.section-standard .pie-hole {
	background-color: var(--color-background-standard);
}

.section-alternate .pie-hole {
	background-color: var(--color-background-alternate);
}

.section-stats .pie-slice {
	height: 6rem;
	left: 3rem;
	position: absolute;
	top: 0;
	transform-origin: 0 50%;
	width: 3rem;
	z-index: 800;
}

/* statistics - US map */
.section-stats .stat-us-map svg {
	display: block;
	height: 6rem;
	margin: 0 auto;
	width: 7.5rem;
}

.section-stats .stat-us-map svg path, 
.section-stats .stat-us-map svg circle {
	fill: var(--color-border);
	stroke: var(--color-bullet);
}

.section-stats .stat-us-map svg .state-highlight {
	fill: var(--color-accent);
}

/* additional informtation */
.section-stats .stats-additional {
	border-top: 1px solid var(--color-border);
	padding-top: 1.5rem;
}

.section-stats .stats-additional p, 
.section-stats .stats-additional li {
	text-align: left;
}

.section-stats .stats-additional ul { 
	margin-left: 1rem;
}

@media (min-width: 48rem) { /* 768 px */
	.section-stats .stat-items {
		gap: 3rem;
	}
}