// ============================================================================
// :: MISSION
// ============================================================================
.m-mission {
	z-index: $z-index-base;

	align-self: flex-start;

	max-width: calc(100vw - 4rem);
	padding-bottom: 2rem;

	padding-left: 2rem;

	text-align: left;

	@include respond-at($screen-medium-base) {
		max-width: 50rem;
		padding-bottom: 8rem;
		padding-left: 8rem;
	}

	&::before {
		content: "";

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

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

		background:
			radial-gradient(
				circle at bottom left,
				#09050F 0%,
				rgba(0, 0, 0, 0) 30%
			);
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.m-mission__title {
	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size-5x-large;
	line-height: $line-height-6x-large;

	@include respond-to($screen-small-base) {
		font-size: $font-size-4x-large;
		line-height: $line-height-5x-large;
	}
}

.m-mission__text,
.m-mission__text p,
.m-mission__title {
	z-index: $z-index-highest;

	color: $text-color-white;
}

.m-mission__text,
.m-mission__text p {
	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
}

// ============================================================================
// :: Modifiers
// ============================================================================