@charset "utf-8";

/* PROCESS */
.elements-process {
	--process-gap: var(--gap-small);
	--circle: 1.25rem;
	--icon: var(--icon-image);
	display: grid;
	gap: var(--process-gap);
	margin-block: var(--margin-block);
	text-align: left;
	}

.elements-process-item {
	display: grid;
	gap: var(--process-gap);
	grid-template-columns: calc(var(--icon) + var(--process-gap) + var(--circle)) 1fr;
	position: relative;
	}
	.elements-process-item::before,
	.elements-process-item::after {
		content: '';
		position: absolute;
		}
	.elements-process-item::before {
		background-color: var(--background);
		border: 1px solid var(--color-accent);
		border-radius: 100%;
		height: var(--circle);
		left: calc(var(--icon) + var(--process-gap));
		text-align: center;
		top: calc((var(--icon) / 2) - (var(--circle) / 2));
		width: var(--circle);
		z-index: 2;
		}
	.elements-process-item.elements-process-item-2::before {
		border-width: 2px;
		}
	.elements-process-item.elements-process-item-3::before {
		border-width: 3px
		}
	.elements-process-item.elements-process-item-4::before {
		border-width: 4px;
		}
	.elements-process-item.elements-process-item-5::before {
		border-width: 5px
		}
	.elements-process-item.elements-process-item-last::before {
		background-color: var(--color-accent);
		color: var(--color-accent-text);
		border: none;
		content: '\f00c';
		display: block;
		font-family: var(--font-awesome);
		font-weight: var(--font-awesome-weight);
		font-size: var(--space-10);
		font-style: normal;
		font-variant: normal;
		line-height: var(--circle);
		}
	.elements-process-item::after {
		border-left: 2px dotted var(--color-link);
		height: calc(100% + var(--process-gap));
		left: calc(var(--icon) + var(--process-gap) + (var(--circle) / 2) - 1px);
		top: calc(var(--icon) / 2);
		z-index: 1;
		}

.elements-process-icon-image {
	width: var(--icon);
	}
.elements-process-header {
	color: var(--color-header);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-none);
	margin-top: calc((var(--icon) / 2) - (var(--circle) / 2));
	}
.elements-process-text {
	color: var(--color-dimmed);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-tight);
	margin-top: var(--space-5);
	}

@container (min-width: 30rem) {
	.elements-process {
		--process-gap: var(--gap);
		}
}
@container (min-width: 60rem) {
	.elements-process {
		--icon: 4rem;
		}
	.elements-process {
		text-align: center;
		}
	.elements-process-2 {
		grid-template-columns: repeat(2, 1fr);
		}
	.elements-process-3 {
		grid-template-columns: repeat(3, 1fr);
		}
	.elements-process-4 {
		grid-template-columns: repeat(4, 1fr);
		}
	.elements-process-5 {
		grid-template-columns: repeat(5, 1fr);
		}
	.elements-process .elements-process-item {
		grid-template-columns: 1fr;
		grid-template-rows: calc(var(--icon) + var(--process-gap) + var(--circle)) 1fr;
		}
		.elements-process .elements-process-item::before {
			left: calc(50% - (var(--circle) / 2));
			top: calc(var(--icon) + var(--process-gap));
			}
		.elements-process-item::after {
			border-left: 0;
			border-top: 2px dotted var(--color-link);
			height: auto;
			left: calc(50% - (var(--circle) / 2));
			top: calc(var(--icon) + var(--process-gap) + (var(--circle) / 2) - 1px);
			width: calc(100% + var(--process-gap));
			}
	.elements-process .elements-process-icon-image {
		margin-inline: auto;
		width: var(--icon);
		}
	.elements-process .elements-process-header {
		margin-top: 0;
		}
}
.elements-process-item.elements-process-item-last::after {
	display: none;
	}