:root {
	--color-primary-background: var(--color-brand-yellow);
	--color-primary-foreground: var(--color-brand-yellow-contrast);
	--color-secondary-background: white;
	--site-navigation-color-background: var(--color-brand-yellow);
	--site-navigation-color-foreground: var(--color-brand-yellow-contrast);
}
*/
/* BEST PRACTICES */
#bestPractices {
/*	padding-inline: var(--safe-inline-gutter-width);*/
}
#bestPractices__list {
	background-color: var(--color-secondary-background);
	color: var(--color-secondary-foreground);
	border-radius:  var(--gap-width);
	margin-block-start: var(--gap-width);
	padding: var(--gap-double-width);
}
.practice
{
	column-gap: var(--gap-double-width);
	display: grid;
	grid-template-areas: 
							"icon heading" 
							"icon description";
	grid-template-columns: auto 1fr;
	padding-block:  var(--gap-width);

	& > .__description
	{
		color: color-mix(in oklab,currentColor 80%, white);
		grid-area:  description;
		hyphens: none;
		line-height: 1.5em;
		padding-block-start: var(--gap-half-width);
	}

	& > .__heading {
		font-weight: 500;
		grid-area: heading;
		text-transform: uppercase;
	}

	& > .__icon
	{
		align-items: start;
		fill: var(--color-primary-background);
		display: grid;
		grid-area: icon;
		height: 4rem;
		width:  4rem;
	}

}


/* STEPS */
.stepCard
{
	background-color: var(--color-secondary-background);
	border-radius: var(--gap-width);
	box-shadow: 2px 4px 12px rgba(0,0,0,.24);
	color: var(--color-secondary-foreground);
	container: stepCard / inline-size;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	height: 100%;
	isolation: isolate;
	max-width: 64vw;
	overflow: hidden;
	transition: scale, box-shadow;
	transition-duration: 0.32s;
	transition-timing-function: cubic-bezier(0, 0, 0.5, 1);
	width: 32rem;

	& > .__description
	{
		font-size: var(--font-size);
		grid-column: 1;
		grid-row: 1;
		hyphens: none;
		line-height: 1.5em;
		padding-block: var(--gap-double-width) var(--gap-fourfold-width);
		padding-inline: var(--gap-double-width);
		z-index: 1;
	}

	& > .__num
	{
		align-self: center;
		font-size: 80cqi;
		font-weight: 800;
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
		opacity: .12;
		z-index: 0;
	}

	@media (hover: hover)
	{
		&:hover
		{
			scale: 1.01;
			box-shadow: 4px 8px 16px rgba(0,0,0,.16);
		}

	}

}