// =============================================================================
// :: Step
// =============================================================================
// .c-step {}

// =============================================================================
// :: Elements
// =============================================================================
.c-step__image-container {
	border-radius: $border-radius-1x-small;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	clip-path: url(#c-step__mask);

	@supports (clip-path: url(#c-step__mask)) {
		border-radius: 0;
	}

	transform: scaleX(-1);
}

.c-step__title {
	margin-bottom: 2.5rem;
}

.c-step__image {

	// clipPath not listening to its class
	clipPath { /* stylelint-disable-line */
		transform: scaleY(1.1) translateY(-2rem) rotate(-5deg);
	}
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-step--reverse {

	.c-step__container {
		flex-direction: row-reverse;

		.c-step__image-container {
			transform: scaleX(1);
		}
	}
}