:root {
	--font-family: 'Barlow Semi Condensed', sans-serif;
	--font-size: 13px;
	--medium-font: 500;
	--semi-bold: 600;
	--card-width: 19rem;
	--violet: hsl(263, 55%, 52%);
	--dark-grayish-blue: hsl(217, 19%, 35%);
	--dark-blackish-blue: hsl(219, 29%, 14%);
	--white: hsl(0, 0%, 100%);
	--light-gray: hsl(0, 0%, 81%);
	--light-grayish-blue: hsl(210, 46%, 95%);
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size);
	background-color: var(--light-grayish-blue);
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
}

.testimonials {
	padding: 2rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
	grid-gap: 2rem;
	grid-auto-flow: dense;
}

.card {
	padding: 2rem;
	border-radius: 10px;
	color: var(--white);
	box-shadow: 10px 14px 30px -20px rgba(0, 0, 0, 0.78);
	transition: box-shadow 0.3s ease-in-out;
}

.card:hover {
	/* transform: scale(1.01); */
	box-shadow: none;
}

.card__reviewer-pic {
	border: 2px solid var(--white);
	border-radius: 50%;
	margin-right: 1rem;
	float: left;
	width: 56px;
	height: 56px;
	transform: translate(0px, -5px);
}

.card__header h2 {
	opacity: 50%;
}

.card__intro {
	margin: 1rem 0;
	font-size: 1.5rem;
}

.card__review {
	font-size: 1rem;
	opacity: 75%;
}

/* MODIFIERS */
.card--violet {
	background-color: var(--violet);
	background-image: url(/images/bg-pattern-quotation.svg);
	background-repeat: no-repeat;
	background-position: 85% 0;
	background-size: 8rem;
}

.card--gray {
	background-color: var(--dark-grayish-blue);
}

.card--black {
	background-color: var(--dark-blackish-blue);
}

.card--white {
	background-color: var(--white);
	color: var(--dark-grayish-blue);
}

.card--wide {
	grid-column: auto / span 2;
}

.card--long {
	grid-row: auto / span 2;
}

/* MEDIA QUERIES */

@media only screen and (max-width: 767px) {
	.testimonials {
		padding: 1rem;
		grid-template-columns: 1fr 1fr;
	}
	/* .card--wide {
		grid-column: auto;
	}

	.card--long {
		grid-row: auto;
	} */
}

@media only screen and (max-width: 650px) {
	.testimonials {
		grid-template-columns: 1fr;
	}

	.card--wide {
		grid-column: auto;
	}

	.card--long {
		grid-row: auto;
	}
}