@property --counterNum {
	syntax: '<integer>';
	initial-value: 0;
	inherits: false;
}

#counters {
	.list {
		border-top: 1px dashed var(--border);
		border-bottom: 1px dashed var(--border);
		padding-block: 100px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		@media only screen and (max-width: 980px) {
			grid-template-columns: 1fr;
		}

		.item {
			display: grid;
			justify-content: center;
			align-content: baseline;
			text-align: center;
			gap: 24px;			
			padding: 22px 28px;

			[data-num] {
				counter-reset: num var(--counterNum);
				transition: --counterNum 0.2s;

				&:before {
					content: counter(num);
				}

				&.is-intersect {
					--counterNum: var(--myNum);
				}
			}

			.title {
				span {
					color: #fff;
				}
			}
		}
	}
}