.timeline-item {
	position: relative;
	counter-increment: timeline-item;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.timeline-item::after {
	content: '';
	position: absolute;
}

.timeline-item:last-child::after {
	display: none;
}

.timeline-item__inner {
	position: relative;
	height: 100%;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--preset--border-radius--lg);
	background-color: var(--wp--preset--color--base);
	text-align: center;
	box-sizing: border-box;
}

.timeline-item__inner::before {
	content: counter(timeline-item);
	position: relative;
	top: 0;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--wp--preset--spacing--50);
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-size: 22px;
	font-weight: 700;
	transform: translateX(-50%);
}

.timeline-item__icon,
.wp-block-qterra-icon.timeline-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px !important;
	max-width: 70px !important;
	height: 70px;
	margin: 0 auto;
	padding: 0 !important;
	box-sizing: border-box;
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--wp--preset--color--secondary-variant);
	color: var(--wp--preset--color--secondary);
}

.timeline-item__icon svg {
	width: 36px;
	height: auto;
}

.timeline-item__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--50) 0 0 !important;
	border-top: 2px solid var(--wp--preset--color--base-variant);
	list-style: none;
	text-align: left;
}

.timeline-item__list li {
	position: relative;
	padding-left: 24px;
}

.timeline-item__list li::before {
	content: '';
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary);
}

/* Section exceptions */
.is-style-section-base-variant .timeline-item__inner {
	background-color: var(--wp--preset--color--base);
}

.is-style-section-primary .timeline-item__inner {
	background-color: var(--wp--preset--color--secondary-variant);
}

.is-style-section-primary .timeline-item__inner::before {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.is-style-section-primary .timeline-item__icon {
	background-color: var(--wp--preset--color--base);
}