/* WPJobster How It Works page SASS file */

.landing-page-image-how-it-works {
	background-image: url("../images/landing/how-it-works.webp");
}

.how-it-works-wrapper {
	h2 {
		font-size: 40px;
		font-weight: 700;
		margin-bottom: 40px;

		> span {
			color: $mainColor;
			font-size: inherit;
		}

		@include small-desktop {
			font-size: 32px;
			margin-bottom: 30px;
		}

		@include mobile {
			font-size: 26px;
			margin-bottom: 20px;
		}
	}

	p {
		color: $mainTextColor;
		font-size: 14px;
		line-height: 26px;
		margin: 0 0 30px;
	}

	.hiw-section {
		h6 {
			text-transform: uppercase;
		}

		h2 {
			font-size: 40px;
			font-weight: 700;
			margin: 10px 0 50px;
			line-height: 44px;

			@include mobile {
				font-size: 32px;
				line-height: 36px;
			}
		}

		.column {
			&:not(.grid) {
				margin-bottom: 30px;
			}

			.column-header {
				display: flex;
				margin-bottom: 10px;
				align-items: center;

				.number {
					color: $mainColor;
					font-size: 72px;
					font-weight: 800;
					width: 90px;
					text-align: center;
					padding: 0 15px;
					line-height: 1;

					@include medium-desktop() {
						font-size: 60px;
						width: 70px
					}


					@include mobile {
						font-size: 40px;
						width: 50px;
					}
				}

				.title {
					font-size: 26px;
					font-weight: 800;
					color: $headlinesColor;

					@include small-desktop {
						font-size: 24px
					}
				}
			}

			.column-body {
				@include base-typography();

				line-height: 28px;
				color: $mainTextColor;
			}
		}
	}
}