/* Layout: intro-stats */
.sw-intro-stats__inner { display: grid; gap: var(--gap-xl); }
.sw-intro-stats__top { display: grid; gap: var(--space-48); } /* also 48px on phones, to separate the cards from the text */

.sw-intro-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sw-stat {
	position: relative;
	display: grid;
	gap: var(--space-4);
	padding: var(--space-24) var(--space-32);
	background: var(--color-bg-alt);
}

.sw-stat__value,
.sw-stat__label { margin: 0; } /* override the global p + p spacing; the card's 4px gap applies */

.sw-stat__icon {
	inline-size: 1.75rem;
	block-size: 1.75rem;
	margin-block-end: var(--space-16);
	color: var(--color-primary);
}

.sw-stat__pattern {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: var(--space-128);
	block-size: var(--space-64);
	-webkit-mask-image: linear-gradient(225deg, #000 30%, transparent 70%);
	mask-image: linear-gradient(225deg, #000 30%, transparent 70%);
}

.sw-intro-stats__images { display: grid; gap: var(--grid-gap); }

/* The frame holds the size; the image moves inside it (.sw-parallax) */
.sw-intro-stats__image { aspect-ratio: 4 / 3; }
.sw-intro-stats__image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

@media (min-width: 48em) {
	.sw-intro-stats__images { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sw-intro-stats__image { aspect-ratio: 451 / 524; }
}

@media (min-width: 75em) {
	.sw-intro-stats__top {
		grid-template-columns: minmax(0, 42.5rem) minmax(0, 35rem);
		justify-content: space-between;
		align-items: center;
	}
}