* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	font-family: "Barlow Semi Condensed", sans-serif;
}

body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	height: 100svh;
	width: 100svw;
	background-color: hsl(214, 17%, 92%);
	color: white;
}

/* -------------------- TESTIMONIALS --------------------*/

.testimonials {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-template-areas:
		"daniel daniel jonathan kira"
		"jeanette patrick patrick kira";
	gap: 27px;
	margin: 100px;
	width: 1120px;
}
/* -------------------- Feedback divs --------------------*/
.feedback {
	padding: 33px;
	border-radius: 10px;
	background-color: white;
	box-shadow: 38px 45px 54px 0px #0000001e;
}

.feedback-text {
	margin-top: 13px;
	line-height: 1.45;
}
h2 {
	font-size: 20px;
	font-weight: 600;
}

p {
	font-size: 13px;
	font-weight: 500;
}

/* -------------------- User information --------------------*/

h1 {
	font-size: 14px;
	font-weight: 600;
}

img {
	width: 32px;
	height: 32px;
	border-radius: 50px;
}
.user {
	display: flex;
	margin-bottom: 15px;
}

.user-information {
	margin-left: 15px;
}

/* -------------------- INDIVIDUAL USERS --------------------*/

#daniel {
	grid-area: daniel;
	background-color: hsl(263, 55%, 52%);
	background-image: url(./images/bg-pattern-quotation.svg);
	background-repeat: no-repeat;
	background-position: right 60px top;
}

#daniel img {
	border: 2px solid hsl(264, 82%, 80%);
}

#daniel p {
	color: hsl(260, 100%, 95%);
}
/* -------------------------------------------------------- */

#jonathan {
	grid-area: jonathan;
	background-color: hsl(217, 19%, 35%);
}

#jonathan p {
	color: hsl(0, 0%, 81%);
}

/* -------------------------------------------------------- */

#jeanette {
	grid-area: jeanette;
	color: hsl(217, 19%, 35%);
}

#jeanette p {
	color: hsl(224, 10%, 45%);
}

/* -------------------------------------------------------- */

#patrick {
	grid-area: patrick;
	background-color: hsl(219, 29%, 14%);
}

#patrick img {
	border: 2px solid hsl(263, 55%, 52%);
}

#patrick p {
	color: hsl(214, 17%, 92%);
}

/* -------------------------------------------------------- */

#kira {
	grid-area: kira;
	color: hsl(217, 19%, 35%);
}

#kira p {
	color: hsl(224, 10%, 45%);
}

/* -------------------- ATTRIBUTION --------------------*/

.attribution {
	font-size: 11px;
	text-align: center;
	color: black;
}
.attribution a {
	color: hsl(228, 45%, 44%);
}

/* -------------------- PHONE VIEW --------------------*/
@media (max-width: 770px) {
	.testimonials {
		display: flex;
		flex-wrap: wrap;
	}

	.feedback {
		width: 300px;
	}

	#daniel {
		background-image: none;
	}
}