/* .wr-icon-grid: line icon + primary left bar per item; stacked or responsive grid; stroke draw-in on scroll. */

.wr-icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--small);
}

.wr-icon-grid.is-stacked {
	grid-template-columns: 1fr;
}

.wr-icon-grid .it {
	display: flex;
	gap: 1rem;
	align-items: center;
	border-left: 0.1875rem solid var(--wp--preset--color--primary);
	padding: 0.625rem 0.625rem 0.625rem 1rem;
}

.wr-icon-grid h2,
.wr-icon-grid h3,
.wr-icon-grid h4 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.wr-icon-grid .ic {
	width: 3rem;
	height: 3rem;
	color: var(--wp--preset--color--primary);
	flex: none;
}

.wr-icon-grid .ic * {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.1s ease;
}

.wr-motion .wr-icon-grid:not(.in) .ic * {
	stroke-dashoffset: 1;
}

.wr-icon-grid.in .ic * {
	stroke-dashoffset: 0;
}

.wr-icon-grid .it:nth-child(2) .ic * {
	transition-delay: 0.12s;
}

.wr-icon-grid .it:nth-child(3) .ic * {
	transition-delay: 0.24s;
}

.wr-icon-grid .it:nth-child(4) .ic * {
	transition-delay: 0.36s;
}

.wr-icon-grid .it:nth-child(5) .ic * {
	transition-delay: 0.48s;
}

.wr-icon-grid .it:nth-child(6) .ic * {
	transition-delay: 0.60s;
}

.wr-icon-grid .it:nth-child(7) .ic * {
	transition-delay: 0.72s;
}

.wr-icon-grid .it:nth-child(8) .ic * {
	transition-delay: 0.84s;
}

.wr-icon-grid .it:nth-child(9) .ic * {
	transition-delay: 0.96s;
}

.wr-icon-grid .it:nth-child(10) .ic * {
	transition-delay: 1.08s;
}

.wr-icon-grid .it:nth-child(11) .ic * {
	transition-delay: 1.20s;
}

.wr-icon-grid .it:nth-child(12) .ic * {
	transition-delay: 1.32s;
}

.wr-icon-grid .it:nth-child(13) .ic * {
	transition-delay: 1.44s;
}

.wr-icon-grid .it:nth-child(14) .ic * {
	transition-delay: 1.56s;
}

.wr-icon-grid .it:nth-child(15) .ic * {
	transition-delay: 1.68s;
}

.wr-icon-grid .it:nth-child(16) .ic * {
	transition-delay: 1.80s;
}

@media (prefers-reduced-motion: reduce) {
	.wr-icon-grid .ic * {
		transition: none !important;
		stroke-dashoffset: 0 !important;
	}
}