.section-testimonials {
	position: relative;
	display: flex;
	width: 100%;
	padding-top: 1.5rem;
	/* min-height: 600px; ??? */
	/*
		margin-bottom: 6ch; ... DNU !!!;
		tenant css w/testimonials customizations is not guaranteed to load after this file,
		so include margin-bottom in those files
	*/
	flex-flow: column nowrap;
	background: var(--theme-color-1);
	/* background-size: cover; */
	/* border: 3px dashed red; */

	.heading {
		text-align: center;
		font-size: 1.8rem;
		text-transform: uppercase;
		color: var(--theme-color-2); /* likely requires override in [tenant].css*/
		background: transparent;
		letter-spacing: .3ch;
		z-index: 1;
	}

	.slide-nav-wrapper {
		position: absolute;
		width: 100%;
		height: fit-content;
		min-height: 3rem;
		left: 0;
		top: 5.4rem;
		/* top: 0; */
		/*
			DNU set top: 0; here;
			both .slide-nav-wrapper & .testimonial-wrapper require accommodation (in tenant css) of an (optional) .heading el
		*/
		z-index: 99999;
		background: transparent;

		.btn-slide-nav {
			position: absolute;
			/* top: .9ch; */
			top: 0;
			font-size: 3rem;
			color: #fff;
			cursor: pointer;
		}
		.btn-slide-nav:hover { cursor: pointer; }
		.btn-slide-nav-left { right: 4.5ch; }
		.btn-slide-nav-right { right: 2.22ch; }
	}
	/*
		.testimonial-wrapper.x-fader-element {
			img {}
			.testimonial {
				.heading {}
				p {}
			}
		}
	*/
	.testimonial-wrapper {
		position: absolute;
		left: 0;
		top: 9rem; /* allows for .heading; if .heading is NIS, override this in tenant.css */
		/*
			DNU set top: 0; here;
			both .slide-nav-wrapper & .testimonial-wrapper require accommodation (in tenant css) of an (optional) .heading el
		*/
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-content: flex-start;
		gap: 0 6ch;
		margin-bottom: 6rem;
		/* padding: 9ch 6ch 6ch; */
		padding: 0 6ch 6ch;
		/* background: var(--theme-color-1); */
		background: inherit;
		/* background-size: cover; */
		opacity: 0;
		transition: all .9s ease-in-out;

	
		img {
			aspect-ratio: 1/1;
			width: 100%;
			height: 100%;
			max-width: 240px; /* per tenant? */
			max-height: 240px; /* per tenant? */
			margin-bottom: 3ch;
			border: 1px solid #fff;
			border-radius: 50%;
		}
		/*
			SET IN TENANT CSS:
			&:nth-of-type(1) img {}
			&:nth-of-type(2) img {}
			&:nth-of-type(3) img {}
		*/
		.testimonial {
			flex: 1 1 36ch;
			padding: 3ch 3ch 12ch;
			background: rgba(0, 0, 0, .3);
			border-radius: 1.8ch;
			.heading {
				width: 100%;
				margin-bottom: .9ch;
				padding: 0;
				color: #fff; /* TODO: should be a var theme color */
				font-size: 1.11rem;
				text-align: left;
				text-transform: uppercase;
				background: transparent;

			}
			p {
				margin-bottom: 1.5ch;
				color: #fff;
				text-align: justify;
				text-shadow: 1px 1px #000;
				font-size: 1.11rem;
				line-height: 1.5;
				font-style: italic;
			}
			.testifier {
				font-style: unset;
				font-size: 1.11rem;
				text-transform: capitalize;
			}
		} /* .testimonial */
		.testimonial:before,
		.testimonial:after {
			display: flex;
			flex-flow: row nowrap;
			color: #fff;
			font-size: 12rem;
			line-height: .9ch;
			/* border: 1px solid #000; */
		}
		.testimonial:before {
			content: "\201C";
			margin: 1.8rem 0 -.3ch -.15ch;
			justify-content: left;
		}
		.testimonial:after {
			content: "\201E";
			margin: -.9ch 0 0 auto;
			justify-content: right;
		}

	} /* .testimonial-wrapper */

	.testimonial-wrapper.on { opacity: 1; }

} /* .section-testimonials */