@charset "utf-8";

/* PROCESS */
	.elements-process {
		--gap: 1rem;
		--gutter: var(--gap);
		--circle: 2rem;
		--icon: 8rem;
		display: grid;
		grid-gap: var(--gap);
		margin: var(--margin-block) auto;
		text-align: left;
		}
	.elements-process-item {
		align-items: flex-start;
		display: grid;
		grid-gap: var(--gap);
		grid-template-columns: calc(var(--icon) + var(--gutter) + var(--circle)) 1fr;
		position: relative;
		}
	.elements-process-icon {
		background-image: url('../images/grid.png');
		border-radius: 100%;
		height: var(--icon);
		padding: 1rem;
		width: var(--icon);
		}
	.elements-process-icon-image {
		background-color: var(--background-base);
		border-radius: 100%;
		padding: 1rem;
		}
	.elements-process-item::before,
	.elements-process-item::after {
		content: '';
		position: absolute;
		}
	.elements-process-item::before {
		background-color: var(--background);
		border: 0.2rem solid var(--color-accent);
		border-radius: 100%;
		height: var(--circle);
		left: calc(var(--icon) + var(--gutter));
		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: 0.3rem;
		}
	.elements-process-item.elements-process-item-3::before {
		border-width: 0.4rem;
		}
	.elements-process-item.elements-process-item-4::before {
		border-width: 0.5rem;
		}
	.elements-process-item.elements-process-item-5::before {
		border-width: 0.6rem;
		}
	.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: 'Font Awesome 6 Pro';
		font-weight: 900;
		font-size: 1rem;
		font-style: normal;
		font-variant: normal;
		line-height: var(--circle);
		}
	.elements-process-item::after {
		border-left: 0.4rem dotted var(--background-borders);
		height: calc(100% + var(--gutter));
		left: calc(var(--icon) + var(--gutter) + (var(--circle) / 2) - 0.2rem);
		top: calc(var(--icon) / 2);
		z-index: 1;
		}
	.elements-process-header {
		color: var(--color-header);
		font-size: 2rem;
		font-weight: 700;
		line-height: 1em;
		margin-top: calc((var(--icon) / 2) - (var(--circle) / 2));
		text-wrap: balance;
		}
	.elements-process-text {
		font-size: var(--text-sub-2);
		line-height: 1.3em;
		margin-top: 0.5rem;
		text-wrap: pretty;
		}
	@media (min-width: 30em) {
		.elements-process {
			--gap: 2rem;
			}
	}
	@media (min-width: 40em) {
		.elements-process.n {
			max-width: 64rem;
			}
	}
	@media (min-width: 60em) {
		.elements-process.w {
			--icon: 16rem;
			--gap: 8rem;
			--gutter: 1rem;
			text-align: center;
			}
		.elements-process.elements-process-2.w {
			grid-template-columns: repeat(2, 1fr);
			}
		.elements-process.elements-process-3.w {
			grid-template-columns: repeat(3, 1fr);
			}
		.elements-process.elements-process-4.w {
			grid-template-columns: repeat(4, 1fr);
			}
		.elements-process.elements-process-5.w {
			grid-template-columns: repeat(5, 1fr);
			}
		.elements-process.w .elements-process-item {
			grid-template-columns: 1fr;
			grid-template-rows: calc(var(--icon) + var(--gutter) + var(--circle)) 1fr;
			}
		.elements-process.w .elements-process-item {
			grid-gap: var(--gutter);
			}
		.elements-process.w .elements-process-item::before {
			left: calc(50% - (var(--circle) / 2));
			top: calc(var(--icon) + var(--gutter));
			}
		.elements-process.w .elements-process-icon {
			margin-inline: auto;
			padding: 4rem;
			}
		.elements-process.w .elements-process-icon-image {
			padding: 2rem;
			}
		.elements-process-item::after {
			border-left: 0;
			border-top: 0.4rem dotted var(--background-borders);
			height: auto;
			left: calc(50% - (var(--circle) / 2));
			top: calc(var(--icon) + var(--gutter) + (var(--circle) / 2) - 0.2rem);
			width: calc(100% + var(--gap));
			}
		.elements-process.w .elements-process-icon-image {
			margin-inline: auto;
			}
		.elements-process.w .elements-process-header {
			font-size: 2.4rem;
			margin-top: 0;
			}
		.elements-process.w .elements-process-text {
			font-size: var(--text-sub-2);
			}
	}
	.elements-process-item.elements-process-item-last::after {
		display: none;
		}