// =============================================================================
// :: Settings
// =============================================================================
$circles-width: 86rem;
$circles-height: 65rem;

// =============================================================================
// :: Intro FAQ
// =============================================================================
.c-intro-faq {
	position: relative;

	overflow: hidden;

	padding-bottom: 5rem;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-intro-faq__contact {
	display: flex;
	flex-direction: column;
	align-items: center;

	height: 100;
	margin-top: 6rem;

	@include respond-at(get-breakpoint("tablet")) {
		flex-direction: row;
		justify-content: space-around;
		align-items: stretch;
	}
}

.c-intro-faq__contact-item {

	&:first-child {
		margin-bottom: 3.6rem;

		@include respond-at(get-breakpoint("tablet")) {
			margin-right: 4rem;
			margin-bottom: 0;
		}
	}
}

.c-intro-faq__bubble {
	margin-bottom: 25rem;
}

.c-intro-faq__circles-container {
	position: absolute;
	top: 10rem;
	right: 0;
	z-index: $z-index-pit;

	width: calc(#{$circles-width} * 0.5);
	height: $circles-height;

	@include respond-at(get-breakpoint("tablet")) {
		top: -5rem;
	}
}

.c-intro-faq__circles {
	width: 100%;
	height: 100%;

	transform: scale(0.6);
}