@charset "utf-8";

/* FORMATTED BLOCKS */
.formatted-blocks {
	--blocks-gap: var(--margin-normal);
	display: grid;
	gap: var(--blocks-gap);
	margin-block: var(--margin-normal);
	}
	.formatted-blocks-full {
		--blocks-gap: 0px;
		}
	.formatted-blocks-wider {
		--force-buffer: var(--margin-pad);
		}
	.formatted-blocks-slim {
		margin-inline: auto;
		max-width: var(--width-compact);
		}

.formatted-blocks-item {
	display: grid;
	gap: var(--margin-pad);
	grid-template-columns: 1fr;
	}
	.formatted-blocks-full .formatted-blocks-item {
		gap: 0;
		}
	.formatted-blocks-slim .formatted-blocks-item {
		gap: var(--gap);
		}

.formatted-blocks-image {
	overflow: hidden;
	position: relative;
	}
		
.formatted-blocks-full .formatted-blocks-content {
	margin: var(--margin-pad) auto;
	padding: 0 var(--margin-pad);
	text-align: center;
	}

.formatted-blocks-impact,
.formatted-blocks-text {
	margin-block: var(--space-10);
	}
	
.formatted-blocks.formatted-blocks-slim .formatted-blocks-text {
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-snug);
	}
		
.formatted-blocks-full .formatted-blocks-buttons {
	justify-content: center;
	}

/* LISTS */
.formatted-blocks-list {
	display: grid;
	gap: 0.625rem;
	margin-block: var(--space-10);
	text-align: start;
	}
.formatted-blocks-list .lists-bulleted-item {
	padding-inline-start: 1.875rem;
	position: relative;
	}
.formatted-blocks-list .lists-bulleted-item::before {
	color: var(--color-accent);
	content: var(--fa);
	font-family: var(--font-awesome);
	font-style: normal;
	font-variant: normal;
	font-weight: var(--font-awesome-weight);
	inset-inline-start: 0;
	position: absolute;
	}
.formatted-blocks-list .lists-bulleted-header {
	font-weight: var(--lists-header-weight);
	}
.formatted-blocks-full .formatted-blocks-list {
	justify-content: center;
	}

/* SEPARATORS */
.formatted-blocks-separator-line .formatted-blocks-item + .formatted-blocks-item {
	position: relative;
	}
	.formatted-blocks-separator-line .formatted-blocks-item + .formatted-blocks-item::after {
		border-block-start: 1px solid var(--background-divider);
		content: '';
		inset-block-start: calc(var(--blocks-gap) / -2);
		inset-inline: 0;
		pointer-events: none;
		position: absolute;
		}

/* STEP COUNTER */
.formatted-blocks-step {
	color: var(--color-stress);
	display: grid;
	font-family: var(--font-style);
	justify-items: start;
	line-height: var(--line-height-none);
	}
	.formatted-blocks-step > em {
		color: var(--color-header-sub);
		font-family: var(--font);
		font-size: var(--font-size-xs);
		font-style: normal;
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--letter-spacing);
		margin-block-end: var(--space-5);
		text-transform: var(--headers-sub-case);
		}

/* STEPS */
.formatted-blocks-style-steps {
	--step-gutter: 2.75rem;
	--step-number: var(--font-size-5xl);
	}
	.formatted-blocks-style-steps .formatted-blocks-holder {
		column-gap: var(--gap);
		display: grid;
		grid-template-columns: var(--step-gutter) minmax(0, 1fr);
		}
	.formatted-blocks-style-steps .formatted-blocks-step > span {
		font-size: var(--step-number);
		}

/* TIMELINE */
.formatted-blocks-style-timeline {
	--step-size: 2.75rem;
	}
	.formatted-blocks-style-timeline .formatted-blocks-item {
		padding-inline-start: calc(var(--step-size) + var(--gap));
		position: relative;
		}
	.formatted-blocks-style-timeline .formatted-blocks-item:not(:last-child)::before {
		background-color: var(--background-trim);
		content: '';
		inset-block: var(--step-size) calc(var(--blocks-gap) * -1);
		inset-inline-start: calc((var(--step-size) - 2px) / 2);
		position: absolute;
		width: 2px;
		}
	.formatted-blocks-style-timeline .formatted-blocks-step {
		align-items: center;
		background-color: var(--background);
		border: 2px solid var(--color-stress);
		border-radius: 100%;
		font-size: var(--font-size-lg);
		height: var(--step-size);
		inset-block-start: 0;
		inset-inline-start: 0;
		justify-items: center;
		position: absolute;
		width: var(--step-size);
		z-index: 1;
		}

/* OVERLAP */
.formatted-blocks-style-overlap .formatted-blocks-item {
	gap: 0;
	}
.formatted-blocks-style-overlap .formatted-blocks-holder {
	background-color: var(--background);
	border-radius: var(--radius);
	box-shadow: var(--box-shadow-elevated);
	padding: var(--margin-block);
	position: relative;
	z-index: 1;
	}
	.formatted-blocks-style-overlap .formatted-blocks-image + .formatted-blocks-holder {
		margin-block: calc(var(--margin-block) * -1) 0;
		margin-inline: var(--space-20);
		}

@media (max-width: 59.99em) {
	/* Image */
	.formatted-blocks-content .formatted-blocks-image.shadow,
	.formatted-blocks-content .formatted-blocks-image.shadow-large,
	.formatted-blocks-wider .formatted-blocks-image.shadow,
	.formatted-blocks-wider .formatted-blocks-image.shadow-large {
		border-radius: 0;
		margin-left: calc(var(--margin-pad) * -1);
		margin-right: calc(var(--margin-pad) * -1);
		}
}

@media (min-width: 60em) {
	.formatted-blocks {
		--blocks-gap: var(--margin-block);
		}
	.formatted-blocks-item {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	.formatted-blocks-full {
		--blocks-gap: var(--margin-normal);
		}
	.formatted-blocks-content .formatted-blocks-item {
		gap: var(--margin-normal);
		}
		
	/* Vertical Algin */
	.formatted-blocks-item-top {
		align-items: flex-start;
		}
	.formatted-blocks-item-middle {
		align-items: center;
		}
	.formatted-blocks-item-bottom {
		align-items: flex-end;
		}

	/* Ordering */
	.formatted-blocks-layout-left .formatted-blocks-item:nth-child(even) .formatted-blocks-image,
	.formatted-blocks-layout-right .formatted-blocks-item:nth-child(odd) .formatted-blocks-image,
	.formatted-blocks-layout-rightonly .formatted-blocks-item .formatted-blocks-image {
		order: 2;
		}
	.formatted-blocks-layout-left .formatted-blocks-item:nth-child(even) .formatted-blocks-holder,
	.formatted-blocks-layout-right .formatted-blocks-item:nth-child(odd) .formatted-blocks-holder,
	.formatted-blocks-layout-rightonly .formatted-blocks-item .formatted-blocks-holder {
		order: 1;
		}

	/* Slim */
	.formatted-blocks.formatted-blocks-slim.formatted-blocks-layout-rightonly .formatted-blocks-item .formatted-blocks-image,
	.formatted-blocks.formatted-blocks-slim.formatted-blocks-layout-right .formatted-blocks-item:nth-child(odd) .formatted-blocks-image,
	.formatted-blocks.formatted-blocks-slim.formatted-blocks-layout-left .formatted-blocks-item:nth-child(even) .formatted-blocks-image {
		transform: translateX(var(--margin-block));
		}
	.formatted-blocks.formatted-blocks-slim.formatted-blocks-layout-leftonly .formatted-blocks-item .formatted-blocks-image,
	.formatted-blocks.formatted-blocks-slim.formatted-blocks-layout-right .formatted-blocks-item:nth-child(even) .formatted-blocks-image,
	.formatted-blocks.formatted-blocks-slim.formatted-blocks-layout-left .formatted-blocks-item:nth-child(odd) .formatted-blocks-image {
		transform: translateX(calc( var(--margin-block) * -1));
		}

	/* Full */
	.formatted-blocks.formatted-blocks-full .formatted-blocks-content {
		margin: 0 auto;
		max-width: var(--width-compact);
		}

	/* Steps */
	.formatted-blocks-style-steps {
		--step-gutter: 4.5rem;
		--step-number: var(--font-size-9xl);
		}

	/* Timeline */
	.formatted-blocks-style-timeline {
		--step-size: 3.25rem;
		}
	.formatted-blocks-style-timeline .formatted-blocks-item {
		column-gap: calc(var(--step-size) + (var(--margin-block) * 2));
		padding-inline-start: 0;
		}
	.formatted-blocks-style-timeline .formatted-blocks-item:not(:last-child)::before {
		inset-inline-start: calc(50% - 1px);
		}
	.formatted-blocks-style-timeline .formatted-blocks-step {
		inset-inline-start: calc(50% - (var(--step-size) / 2));
		}

	/* Overlap */
	.formatted-blocks-style-overlap .formatted-blocks-item {
		gap: 0;
		}
	.formatted-blocks-style-overlap .formatted-blocks-image + .formatted-blocks-holder {
		margin-block: 0;
		margin-inline: calc(var(--margin-normal) * -1) 0;
		}
	.formatted-blocks-style-overlap.formatted-blocks-layout-left .formatted-blocks-item:nth-child(even) .formatted-blocks-image + .formatted-blocks-holder,
	.formatted-blocks-style-overlap.formatted-blocks-layout-right .formatted-blocks-item:nth-child(odd) .formatted-blocks-image + .formatted-blocks-holder,
	.formatted-blocks-style-overlap.formatted-blocks-layout-rightonly .formatted-blocks-image + .formatted-blocks-holder {
		margin-inline: 0 calc(var(--margin-normal) * -1);
		}
}