// ============================================================================
// :: Steps
// ============================================================================
.o-steps {
	position: relative;
	z-index: $z-index-base;

	margin-top: -5rem;
	margin-bottom: 5rem;

	padding: 2rem;

	background-color: $background-color-white;

	box-shadow: $box-shadow;

	counter-reset: step-counter;

	@include respond-at($screen-small-base) {
		padding: 3rem 7rem 6rem;
	}

	&::after {
		content: "";

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: $z-index-base;

		display: block;
		width: 100%;
		height: 0.5rem;

		background: $gradient-primary;
	}

	.l-grid--with-margins {
		@include respond-to($screen-small-base) {
			width: 100%;

			transform: none;
		}
	}

	// .m-step {

	//   @include respond-to($screen-small-base) {
	//     margin: 3rem 1rem;
	//   }
	// }
}

// ============================================================================
// :: Modifiers
// ============================================================================
// On the recycle process page, the steps are used as a single component in all
// different blocks so we don't need the general steps styling
.o-steps--no-styling {
	margin-top: 2rem;
	padding: 0;

	background-color: transparent;
	box-shadow: none;

	&::after {
		display: none;
	}

	.m-step {

		@include respond-to($screen-small-base) {
			margin: 1rem;
		}
	}
}