@use "sass:math";

.xprez-quote {
	&.xprez-quote-boxed {
		background: var(--x-quote-box-bg);
	}
}

.xprez-quote-box {
	@include cont-width($quote-width);
	@include xprez-mobile-extra-space;
	@include clearfix;
	text-align: center;

	.xprez-quote-boxed & {
		padding-top: $quote-box-padding-v;
		padding-bottom: $quote-box-padding-v;

		@include xprez-breakpoint-down($typo-break-s) {
			padding-top: math.div($quote-box-padding-v, 2);
			padding-bottom: math.div($quote-box-padding-v, 2);
		}
	}
}

.xprez-quote-title {
	margin-bottom: $quote-head-title-mb;
	@include xprez-breakpoint-down($typo-break-m) {
		margin-bottom: math.div($quote-head-title-mb, 2);
	}
}

.xprez-qoute__img {
	width: $quote-avatar-width;
	height: auto;
	border-radius: 50%;
	margin-bottom: 0.25rem;
}

.xprez-quote__name {
	@include type($quote-avatar-name-size, $base-lh);
	font-weight: 700;
}

.xprez-quote__job-title {
	@include type($quote-avatar-name-size * 0.85, $base-lh);
	font-style: italic;
	max-width: 250px;
	margin: 0 auto;
	opacity: 0.5;
}

.xprez-quote__quote {
	margin-top: $g*1.5;

	h4 {
		@include type-fluid(
						$quote-title-fluid-size, $quote-title-lh,
						$quote-title-mt, $quote-title-mb);
		letter-spacing: -0.01em;
	}

	p {
		font-family: $quote-text-font-family;
		@include type(
						$quote-text-size, $quote-text-lh,
						$quote-text-mt, $quote-text-mb);
		font-style: $quote-text-font-style;
	}
}

// Two comments variant

.xprez-quote-cols-2 {

	.xprez-quote-box {
		max-width: $quote-2-cols-width;
		padding-left: 15px;
		padding-right: 15px;
	}

	.xprez-quote__item {
		box-sizing: border-box;
		width: 45%;
		float: left;



		&:last-child {
	    	float: right;
	    }

		@media only screen and (max-width: $typo-break-m) {
	    	width: auto;
			float: none;

			&:last-child {
				margin-top: $g*2;
			}
	    }

		p {
			//@include type($quote-text-size * 0.85, null);
		}

		.xprez-qoute__img {
			width: $quote-avatar-width * 0.75;
		}
	}
}