.steps {
	max-width: 80%;
	padding-left: 0;
	list-style: none;
	counter-reset: welcome-steps;

	@media (max-width: 991px) {
		max-width: 100%;
	}
}

.steps > .steps__item {
	margin-bottom: 2.5em;
	padding: 19px;
	border: 1px solid $gray-lighter;
	border-radius: 4px;
	overflow: hidden;

	// The step number.
	&:before {
		content: counter(welcome-steps);
		counter-increment: welcome-steps;
		width: 50px;
		height: 50px;
		float: left;
		margin-right: 1em;
		background: $gray-lighter;
		border: 1px solid darken($gray-lighter, 10%);
		border-radius: 50%;
		font: bold 2em monospace;
		text-align: center;
		line-height: 49px;

		@media (max-width: 991px) {
			display: none;
		}
	}

	.body {
		float: left;
	}

	h2 {
		font-weight: bold;
		margin-top: 0;
	}

	p:last-child {
		margin-bottom: 0;
	}
}