ol.steps, ul.steps {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	gap: var(--Padding-XS);
	padding-bottom: 0.5rem;
	overflow-x: auto;
	margin-bottom: 0;
	padding-top:2.5rem;
	margin-top: -2.5rem;
	li.step {
		border-radius: 1.5rem;
		padding: var(--Padding-M);
		background-color: var(--Beige);
		flex-grow: 1;
		flex-basis: 50%;
		min-width: 14.375rem;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--Padding-XXS);
		&:after {
			content: '';
			display: block;
			position: absolute;
			left: 100%;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-left: var(--Padding-XS) solid var(--Beige);
			border-top: var(--Padding-XS) solid transparent;
			border-bottom: var(--Padding-XS) solid transparent;
			clear: both;
		}
	}
	&.steps-tall li.step {
		@media (min-width:992px) {
			padding: var(--Padding-XL) var(--Padding-M);
			justify-content: center;
		}
	}
	&.blue li.step:first-child{
		background-color: var(--Blue);
		color: white;
		a {
			color: white;
		}
	}
	&.blue li.highlightStep:hover {
			background-color: var(--Blue-Tint);
			a { 
    			color: var(--Almost-Black);			
			}
		}
	
	&.blue li.step:last-child{
		&:after {
			background-image: url('/-/media/home-renovation-savings/icons/icon-solid-fill-blue-dollar.svg');
			background-repeat: no-repeat;
			width: 4rem;
			height: 5rem;
			top: 0rem;
			left: auto;
			right: 1rem;
			border: none;
		}
	}
	&.teal li.step:first-child{
		background-color: var(--Teal);
		color: white;
		a {
			color: white;
		}
	}
	&.teal li.step:last-child{
		&:after {
			background-image: url('/-/media/home-renovation-savings/icons/icon-solid-fill-teal-dollar.svg');
			background-repeat: no-repeat;
			width: 4rem;
			height: 5rem;
			top: 0rem;
			left: auto;
			right: 1rem;
			border: none;
		}
	}
}