@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
  --font: "Barlow Semi Condensed", sans-serif;
  --purple50: hsl(260, 100%, 95%);
  --purple300: hsl(264, 82%, 80%);
  --purple500: hsl(263, 55%, 52%);
  --white: hsl(0, 0%, 100%);
  --grey100: hsl(214, 17%, 92%);
  --grey200: hsl(0, 0%, 81%);
  --grey400: hsl(224, 10%, 45%);
  --grey500: hsl(217, 19%, 35%);
  --darkblue: hsl(219, 29%, 14%);
  --black: hsl(0, 0%, 7%);
  --greyShadow: hsla(227, 5%, 63%, 0.788);
}

*, *::after, *::before{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}
html, body{
  min-height: 100vh;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--purple50);
  font-family: var(--font);
  line-height: 1.1;
}
.container{
  display: grid;
  place-content: center;
  padding: 3rem 2rem;
  gap: 1.5rem;
  width: min(98%, 80rem);
}

.testimonial{
  padding: 2rem;
  border-radius: .5rem;
  box-shadow: 0 .8rem 1.5rem var(--greyShadow);
}
.daniel{
  background-color: var(--purple500);
}
.jonathan{
  background-color: var(--grey500);
}
.jeanette{
  background-color: var(--white);
}
.patrick{
  background-color: var(--darkblue);
}
.kira{
  background-color: var(--white);
}

.profile{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile img{
  width: 3rem;
  border-radius: 50%;
  border: .2rem solid transparent;
} 
.daniel .profile img,
.patrick .profile img{
  border-color: var(--purple300);
}

.profile h1{
  color:  var(--grey100);
  font-size: 1.1rem;
  font-weight: 500;
}
.profile h1 span{
  color: var(--grey200);
  font-size: 1rem;
  font-weight: normal;
  display: block;
}
.white-bg-pf h1{
  color: var(--grey500);
}
.white-bg-pf h1 span{
  color: var(--grey400);
}

.bold{
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 1rem auto;
  
}
.desc{
  color: var(--grey200);
  font-size: 1.1rem;
  line-height: 1.2;
}

.white-bg .bold{
  color: var(--grey500);
}
.white-bg .desc{
  color: var(--grey400);
}

@media screen and (min-width:48rem){
  .container{
    grid-template-columns: repeat(2, 1fr);
  }

  .symbol{
  background-image: url("images/bg-pattern-quotation.svg");
  background-repeat: no-repeat;
  background-position: top 0 right 10%;
}
  .daniel{
    grid-column: span 2;
  }
  .jeanette{
    grid-column: 1;
  }
  .patrick{
    grid-column: span 2;
  }
  .kira{
    grid-column: 2;
    grid-row: 2 /  4;
  }
}

@media screen and (min-width:62rem){
  .container{
    grid-template-columns: repeat(4, 1fr) ;
  }
  .kira{
      grid-column: 4;
      grid-row: 1 / span 2;
}
}