// ============================================================================
// :: QUIZ
// ============================================================================
.m-quiz-result {
	display: flex;
	flex-wrap: wrap;

	line-height: 1.5;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-quiz-result__label {
	display: inline-block;
	margin-bottom: 1rem;

	font-family: $font-family-beausans;
	font-weight: 700;
}

.m-quiz-result__title {
	margin-bottom: 2rem;

	font-family: $font-family-roboto;
	font-size: $font-size-5x-large;
	font-weight: 300;
}

.m-quiz-result__content {
	position: relative;

	width: 100%;
	padding: 0 5rem 5rem 2.5rem;

	background-color: $primary-color;
	color: $white;

	@include respond-to($screen-large-base) {
		margin-bottom: 3rem;

		&::after {
			content: "";

			position: absolute;
			left: -50%;
			bottom: -4rem;
			z-index: -1;

			width: 200%;
			height: 100%;

			background-color: $primary-color;

			border-radius: 100%;
		}
	}

	@include respond-at($screen-large-base) {
		width: 40%;

		background-color: transparent;

		&::after {
			content: "";

			position: absolute;
			top: -4rem;
			right: -2.5rem;
			z-index: -1;

			width: 145%;
			height: 100%;

			background-color: $primary-color;

			border-radius: 100%;
		}
	}
}

.m-quiz-result__form {
	width: 100%;
	padding: 5rem;

	@include respond-at($screen-large-base) {
		width: 60%;
	}
}

.m-quiz-result__image {
	position: relative;

	width: 100%;
	height: 28rem;
	margin-bottom: 2rem;

	.m-quiz-result__image-container {
		position: absolute;
		top: 4rem;
		left: 4rem;
		z-index: 2;

		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 20rem;
		height: 20rem;

		border-radius: 100%;
		background-color: white;
	}

	&::before {
		content: "";

		position: absolute;
		top: 2rem;
		left: 2rem;
		z-index: 1;

		display: inline-block;
		width: 24rem;
		height: 24rem;

		border-radius: 100%;
		background-color: $white;
		opacity: 0.1;
	}

	&::after {
		content: "";

		position: absolute;
		z-index: 0;

		display: inline-block;
		width: 28rem;
		height: 28rem;

		border-radius: 100%;
		background-color: $white;
		opacity: 0.1;
	}

	img {
		width: 15rem;
	}
}
// ============================================================================
// :: Modifiers
// ============================================================================
.m-quiz-result--no-form {
	padding: 4rem;

	background-color: $primary-color;

	.m-quiz-result__content {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		padding: 0;

		@include respond-at($screen-medium-base) {
			flex-wrap: nowrap;
		}
	}

	.m-quiz-result__image {
		width: 100%;

		@include respond-at($screen-medium-base) {
			flex-shrink: 0;
			width: 31rem;
			margin-bottom: 0;
		}
	}
}