// ============================================================================
// :: Quote
// ============================================================================
.a-quote {
	position: relative;

	padding: 4rem;

	background-color: $background-color-white;

	@include respond-at($screen-medium-base) {
		padding: 6rem 11rem 5rem;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.a-quote__container {

	@include respond-at($screen-medium-base) {
		display: flex;
		justify-content: space-between;
		align-items: center;

		margin-right: -4rem;
		margin-left: -4rem;
	}
}

.a-quote__text {
	position: relative;

	&::before {
		content: "\“";

		position: absolute;
		top: -4rem;
		left: -4rem;

		display: block;

		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-medium-base) {
			top: -2.5rem;
			left: -1.5rem;

			font-size: $font-size-3x-large;
			line-height: $line-height-4x-large;
		}
	}

	@include respond-to($screen-medium-base) {
		font-family: $font-family-beausans;
		font-size: $font-size-1x-large;
		line-height: $line-height-3x-large;
	}
}

.a-quote__content {

	@include respond-at($screen-medium-base) {
		padding-right: 4rem;
		padding-left: 4rem;
	}
}

.a-quote__author-container {
	display: flex;
	align-items: center;
	margin-top: 1rem;

	@include respond-at($screen-medium-base) {
		display: block;
		flex-shrink: 0;
		width: 22rem;
		margin: 0;
		padding-right: 4rem;
		padding-left: 4rem;
		box-sizing: content-box;
	}
}

.a-quote__picture {
	position: relative;

	display: block;
	width: 6rem;
	height: 6rem;
	overflow: hidden;
	margin-right: 1rem;

	border-radius: 100%;

	@include respond-at($screen-medium-base) {
		width: 100%;
		height: 0;
		margin: 0;
		padding-bottom: 100%;
	}
}

.a-quote__image {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.a-quote__author {
	display: none;
	margin-top: 1rem;

	font-family: $font-family-roboto;
	font-weight: $font-weight-bold;
	font-size: $font-size-2x-small;
	text-transform: uppercase;

	color: $text-color-grey;

	@include respond-at($screen-medium-base) {
		display: block;

		font-size: $font-size;
	}
}

.a-quote__author-mobile {
	display: block;

	@include respond-at($screen-medium-base) {
		display: none;
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-quote--dark {
	background-color: $background-color-grey-extra-dark;

	.a-quote__text {
		color: $text-color-white;
	}

	.a-quote__author {
		color: $text-color-white-1x-light;
	}
}

.a-quote--white {
	background-color: $background-color-white;
}

.a-quote--light {
	background-color: $background-color-grey-light;
}

.a-quote--primary {
	background-color: $background-color-primary;

	.a-quote__text {
		color: $text-color-white;
	}

	.a-quote__author {
		color: $text-color-white-1x-light;
	}
}

.a-quote--medium {
	padding: 4rem;

	&:not(.a-quote--portrait) {
		padding: 5.5rem 4rem 5.5rem 8rem;
	}

	.a-quote__content {
		padding: 1.5rem 4rem;
	}

	&.a-quote--portrait.a-quote--right {
		padding-left: 8rem;
	}
}

.a-quote--small {
	padding: 4rem;

	.a-quote__text {

		&::before {
			display: none;
		}
	}
}

.a-quote--extra-small {
	padding: 2.4rem;

	.a-quote__text {

		&::before {
			display: none;
		}
	}
}

.a-quote--left {

	.a-quote__author-container {

		@include respond-at($screen-medium-base) {
			order: -1;
		}
	}
}