@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'); 
*{
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: "Barlow Semi Condensed", serif;
}
body{
  background: #EDF2F8  ;
}
.container{
  display:grid; 
  grid-template-columns: 1fr; 
  gap:2rem;
  padding:3.5rem 0;
}
  .quote{
    position:absolute; 
    top:0; 
    right:1.5rem;
    opacity: 0.7; 
    z-index:0 ;
  }
.box1{
  background: #733FC8  ;
  color:white;
  position:relative;
}
.box2{
  background: #49556B  ;
  color:white;
}
.box3{
  background: #FFFFFF  ;
  color: hsl(217, 19%, 35%) ;
}
.box4{
  background: #18202D  ;
  color:white;
}
.box5{
  background: #FEFEFE  ;
  color: hsl(217, 19%, 35%) ;
}
.box{
  z-index: -1;
  padding:1.5rem; 
  border-radius:.5rem; 
  width:85vw; 
  margin:0 auto;
  display:flex; 
  flex-direction: column; 
  gap:1rem;
  max-width:450px;
}
.img-box{
  display:flex; 
  gap:1rem;
  align-items: center;
}
.people-img{
  border-radius:50%;
  width:2rem; 
  height:auto;
} 
.border-img{
  border:2px solid #A774F2;
}
.heading-box{
  font-weight: 600;
  font-size:1.2rem;
  z-index: 0;
  
}
.description-box{
  font-weight: 500;
  font-size:0.8rem;
}
.upper{
  font-size:.7rem; 
  font-weight: 500;
}
.lower{
  color: rgba(255, 255, 255,0.5);
  font-weight: 500;
  font-size: .6rem;
}
.lower-color{
  color: rgba(72, 81, 94,0.5);
}
.description-white{
  color: rgba(255, 255, 255,0.5) ;
}
.description-black{
  color: rgba(72, 81, 94,0.5) ;
}

@media (min-width:1024px){
  .box{
    width:auto;
    max-width:none;
  }
  .container{
    grid-template-columns:repeat(4, 1fr);
    max-width: 1000px; 
    margin:0 auto;
    width: 90vw;
    margin-top:80px;
  }

  .box1{
    grid-column:1/3;
    grid-row:1/2;
  }
  .box2{
    grid-column:3/4; 
    grid-row: 1/2;
  }
  .box3{
    grid-column:1/2;
    grid-row:2/3;
  }
  .box4{
    grid-column:2/4; 
    grid-row:2/3;
  }
  .box5{
    grid-column:4/5; 
    grid-row:1/3 ;
  }
}
@media (min-width:769px) and (max-width:1023px){
  .container{
    grid-template-columns:1fr 1fr;
    width:92vw;
    max-width:900px; 
    margin:auto;
  }
  .box{
    width:auto;
    max-width:none; 
  }
}