@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&family=Big+Shoulders+Display:wght@700&family=Karla:wght@400;700&family=League+Spartan:wght@400;500;700&family=Lexend+Deca&family=Open+Sans&family=Poppins:wght@200;400;600&display=swap');


*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

body{
	font-family: 'Barlow Semi Condensed', sans-serif;
	background-color: hsl(210, 46%, 95%);
}

main{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.flex-column{
	display: flex;
	flex-direction: column;
	gap:1rem;
}

.grey{
	color: hsla(0, 0%, 100%, 0.5);
}

.dark-grey{
	color: hsl(0, 0%, 50%);
}

.dark-blue{
	color: hsl(217, 19%, 35%);
}

.container{
	padding:2rem;
	max-width: 66.875rem;
	display: grid;
	gap:1.75rem;
} 

.card{
	font-family: 'Barlow Semi Condensed', sans-serif;
	padding:2rem;
	border-radius: 10px;
}

.daniel{
	color: hsla(0, 0%, 100%, 0.959);
	background-color: hsl(263, 55%, 52%);
	background-image: url("./images/bg-pattern-quotation.svg");
  	background-repeat: no-repeat;
  	background-position: top right 10%;
}

.daniel img{
	border:2px solid hsl(263, 96%, 74%);
}

.jonathan{
	color: hsla(0, 0%, 100%, 0.884);
	background-color: hsl(217, 19%, 35%);
}

.patrick{
	color: hsla(0, 0%, 100%, 0.884);
	background-color: hsl(219, 29%, 14%);
}

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

.jeanette{
	background-color: hsl(0, 0%, 100%);
	box-shadow: 2.5rem 3.75rem 3rem -3rem rgba(0, 0, 0, 0.253);
}

.kira{
	background-color: hsl(0, 0%, 100%);
	box-shadow: 2.5rem 3.75rem 3rem -3rem rgba(0, 0, 0, 0.253);
}
 
.person-details{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:1.25rem;
}

.name-and-status{
	display: flex;
	flex-direction: column;
	gap:0.25rem;
}

.person-details img{
	border-radius: 50%;
	width: 2rem;
}

.name{
	font-size: 0.75rem;
	font-weight: 500;
}

.verified{
	font-size: 0.65rem;
	color: hsla(0, 0%, 100%, 0.5);
}

.verified-dark-grey{
	color: hsl(0, 0%, 51%);
}

h1{
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.5px;
}

h2{
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.5px;
}

p{
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
}

@media screen and (min-width: 768px) {
	.container{
		grid-template-columns: repeat(4, 1fr);
	}
	.kira{
		grid-column-start: 4;
		grid-row-start: 1;
		grid-row-end: span 2;
	}
	.grid-col-span-2{
		grid-column: span 2;
	}
}